.flex-container {
margin: 10px;
padding: 15px;
border-radius: 5px;
background: #60B99A;
}
.flex-item {
margin: 10px;
padding: 20px;
color: #fff;
text-align: center;
border-radius: 5px;
background: #4584b1;
}
/*<div class="flex-container">*/
/*<div class="flex-item">1</div>*/
/*<div class="flex-item">2</div>*/
/*<div class="flex-item">3</div>*/
/*<div class="flex-item">4</div>*/
/*<div class="flex-item">5</div>*/
/*</div>*/
/*div 요소는 block 요소이기에 수직정렬. 수평 정렬하려면 flex-item(자식요소)를 inline-block 이나 float 으로*/
.flex-item {
display: inline-block;
float: left;
}
/*위 항목들을 부모 요소 내에서 균등 수평 정렬 하려면*/
.flex-container {
/*flex, inline-flex 는 부모 요소에 반드시 지정해야하는 유일한 속성, 자식 요소는 자동적으로 flex item.*/
display: flex;
justify-content: space-around;
}
.flex-container {
/*좌에서 우로 수평배치. 기본값*/
flex-direction: row;
/*우에서 좌로 수평배치*/
/*row-reverse;*/
/*위에서 아래로 수직 배치*/
/*column;*/
/*아래에서 위로 수직 배치*/
/*column-reverse;*/
}
.flex-container {
/*flex 컨테이너의 width 보다 flex item 들의 width 의 합계가 더 큰 경우, 한줄 or 여러줄로 표현할 것인지를 지정.*/
/*flex item 을 개행하지 않고 1행에 배치. 기본값*/
/*각 flex item 의 폭은 flex container 에 들어갈 수 있는 크기로 축소됨.*/
/*flex item 들의 width 의 합계가 flex 컨테이너의 width 보다 큰 경우 flex 컨테이너를 넘치게 된다.
이때 overflow: auto;를 지정하면 가로 스크롤이 생기며 컨테이너를 넘치지 않는다.*/
flex-wrap: nowrap;
/*flex item 들의 width 의 합계가 flex 컨테이너의 width 보다 큰 경우, flex item 을 복수행에 배치한다.
기본적으로 좌에서 우로, 위에서 아래로 배치된다.*/
/*flex-wrap: wrap;*/
/*wrap 과 동일하나 아래에서 위로 배치된다.*/
/*flex-wrap: wrap-reverse;*/
}
.flex-container {
/*flex-direction 과 flex-wrap 속성을 설정하기 위한 shorthand. 기본값은 row nowrap*/
flex-flow: column wrap;
}
.flex-container {
/*flex container 의 main axis 를 기준으로 flex item 을 수평 정렬*/
/*main start(좌측)를 기준으로 정렬한다. justify-content 속성의 기본값이다.*/
justify-content: flex-start;
/*main end(우측)를 기준으로 정렬한다.*/
/*justify-content: flex-end;*/
/*flex container 의 중앙에 정렬한다.*/
/*justify-content: center;*/
/*첫번째와 마지막 flex item 은 좌우 측면에 정렬되고 나머지와 균등한 간격으로 정렬된다.*/
/*justify-content: space-between;*/
/*모든 flex item 은 균등한 간격으로 정렬된다*/
/*justify-content: space-around;*/
}
.flex-container {
/*flex item 을 flex container 의 수직 방향(cross axis)으로 정렬. 모든 flex item 에 적용.*/
/*모든 flex item 은 flex container 의 높이(cross start 에서 cross end 까지의 높이)에 꽉찬 높이를 갖는다. 기본값.*/
align-items: stretch;
/*모든 flex item 은 flex container 의 cross start 기준으로 정렬된다.*/
/*크기는 그대로 왼쪽 위에서부터 오른쪽으로 정렬*/
/*align-items: flex-start;*/
/*모든 flex item 은 flex container 의 cross end 기준으로 정렬된다.*/
/*크기는 그대로 왼쪽 아래에서부터 오른쪽으로 정렬*/
/*align-items: flex-end;*/
/*모든 flex item 은 flex container 의 cross axis 의 중앙에 정렬된다.*/
/*크기는 그대로 왼쪽 중앙에서부터 오른쪽으로 정렬*/
/*align-items: center;*/
/*모든 flex item 은 flex container 의 baseline 을 기준으로 정렬된다.*/
/*item 의 높이가 달라도 baseline 에 글자를 맞춰서 정렬*/
/*align-items: baseline;*/
}
.flex-container {
/*flex container 의 cross axis 를 기준으로 flex item 을 수직 정렬한다.*/
/*justify-content 속성은 flex container 의 main axis 를 기준으로 flex item 을 수평 정렬*/
/*모든 flex item 은 flex item 의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. 기본값.*/
align-content: stretch;
/*모든 flex item 은 flex container 의 cross start 기준으로 stack 정렬된다.*/
/*stack 정렬: 행들이 붙어서 정렬됨. 행과 행 사이에 공간이 없음.*/
/*왼쪽 위에 붙어서 정렬됨.*/
/*align-content: flex-start;*/
/*모든 flex item 은 flex container 의 cross end 기준으로 stack 정렬된다.*/
/*왼쪽 아래에 붙어서 정렬됨.*/
/*align-content: flex-end;*/
/*모든 flex item 은 flex container 의 cross axis 의 중앙에 stack 정렬된다.*/
/*align-content: center;*/
/*첫번째 flex item 의 행은 flex container 의 상단에 마지막 flex item 의 행은 flex container 의 하단에
배치되며 나머지 행은 균등 분할된 공간에 배치 정렬된다.*/
/*align-content: space-between;*/
/*모든 flex item 은 균등 분할된 공간 내에 배치 정렬된다.*/
/*align-content: space-around;*/
}
.flex-item {
/*flex item 의 배치 순서를 지정한다. HTML 코드를 변경하지 않고 order 속성값을 지정하는 것으로 간단히
재배치할 수 있다. 기본 배치 순서는 flex container 에 추가된 순서이다. 기본값은 0이다.*/
order: 0;
/*flex item 의 너비에 대한 확대 인자(flex grow factor)를 지정한다. 기본값은 0이고 음수값은 무효하다.*/
/*모든 flex item 이 동일한 flex-grow 속성값을 가지면 모든 flex item 은 동일한 너비를 갖는다.
두번째 flex item 의 flex-grow 속성값을 3으로 지정하면 다른 flex item 보다 더 넓은 너비를 갖는다.*/
flex-grow: 1;
/*flex item 의 너비에 대한 축소 인자(flex shrink factor)를 지정한다. 기본값은 1이고 음수값은 무효하다.
0을 지정하면 축소가 해제되어 원래의 너비를 유지한다.*/
/*기본적으로 모든 flex item 은 축소된 상태로 지정(기본값 1)하고 두번째 flex item 만 축소를
해제(flex-shrink: 0;)하면 원래의 너비를 유지한다.*/
flex-shrink: 0;
/*flex item 의 너비 기본값을 px, % 등의 단위로 지정한다. 기본값은 auto 이다.*/
flex-basis: 350%;
/*flex-grow, flex-shrink, flex-basis 속성의 shorthand 이다. 기본값은 0 1 auto 이다.*/
/*flex: 0 1 auto;*/
/*align-items 속성(flex container 속성으로 flex item 을 flex container 의 수직 방향(cross axis)으로
정렬한다.)보다 우선하여 개별 flex item 을 정렬한다. 기본값은 auto 이다.*/
align-self: auto; /*| flex-start | flex-end | center | baseline | stretch*/
}