18. Flexbox Layout

.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*/
}