flex (아이템에 적용)

flex는 flex-grow,flex-shrink,flex-basis가 합쳐진 축약 속성입니다.
아이템의 크기,공간,비율등을 결정합니다.

flex-grow:(number, 기본값 0)

아이템이 공간내에서 가지는 비율을 결정합니다.
값은 px이 아닌 비율이며, 아이템들이 빈 공간이 없게 풀로 표시됩니다.

<style>
    .item--1 {
        flex-grow:3;
        background:#0080cc;
    }
    .item--2 {
        flex-grow:1;
        background:#cc3a2f;
    }
    .item--3 {
        flex-grow:2;
        background:#01cc49;
    }
    .item--4 {
        flex-grow:1;
        background:#cca514;
    }
    .item--5 {
        flex-grow:2;
        background:#9a25cc;
    }
</style>

RESULT

flex-shrink:(number, 초기값 1)

아이템이 넘칠때 요소를 어떻게 처리할지 결정합니다.
flex-basis 속성과 같이 쓰입니다.
값이 0이라면 아이템이 넘쳐도 넓이가 flex-basis 값 밑으로 떨어지지 않습니다.
flex-grow는 확대 비율, flex-shrink는 축소 비율이라고 생각하면 쉽습니다.

<style>
    .box {
        display:flex;
        width:500px;
    }
    .item {
        flex-basis:150px;
        padding:20px 10px;
        color:#fff;
    }
    .item:first-letter {font-size:50px}
    .item--1 {
        flex-shrink:0;
        background:#0080cc;
    }
    .item--2 {
        flex-shrink:2;
        background:#cc3a2f;
    }
</style>

RESULT

컨테이너의 넓이값 500px을 주고, 각 아이템의 넓이는 flext-basis로 150px로 선언했습니다.
컨테이너의 넓이값을 넘어가게 되므로 각각의 아이템들을 500px내에서 유연하게 넓이값을 가지게 됩니다.
하지만 flex-shrink을 0으로 지정함으로써 넓이를 고정할 수 있습니다.

flex-basis:(number, 초기값 auto)

아이템의 크기를 설정합니다.

<style>
    .box {
        display:flex;
    }
    .item {
        flex-basis:500px;
        padding:20px 10px;
        color:#fff;
    }
</style>

RESULT

flex-wrap가 선언되어 있지 않아서 넘치는 부분은 유연하게 넓이가 조절됩니다.

<style>
    .box {
        display:flex;
        flex-wrap:wrap;
    }
    .item {
        flex-basis:500px;
        padding:20px 10px;
        color:#fff;
    }
</style>

RESULT

flex-wrap가 선언되어 flex-basis에 적용된 넓이대로 표시됩니다.

flex:(flex-grow, flex-shrink, flex-basis)

세 가지 속성을 한번에 선언할 수 있습니다.
선언한 매개변수 숫자에 따라 적용되는 속성이 다릅니다.

값이 한 개일 때

숫자를 지정하면 flex-grow 입니다.
길이 또는 퍼센트를 지정하면 flex-basis입니다.
none, auto, initial 중 하나를 지정할 수 있습니다.

값이 두 개일 때

첫 번째 값은 숫자이고 flex-grow입니다.
두 번재 값은 숫자를 지정하면 flex-shrink 입니다.
길이 또는 퍼센트, auto를 지정하면 flex-basis 입니다.

값이 세 개일 때

flex-grow, flex-shrink, flex-basis 순입니다.

기타

flex:initial : flex:0 1 auto 동일
flex:auto : flex:1 1 auto 동일
flex:none : flex:0 0 auto 동일

align-self (아이템에 적용)

컨테이너에서 적용했던 align-items의 아이템 버전입니다.

<style>
    .box {
        display:flex;
    }
    .item {
        flex-basis:350px;
        padding:20px 10px;
        color:#fff;
    }
    .item--3 {
        align-self:center;
        background:#01cc49;
    }
</style>

RESULT

align-self:center

order

아이템의 순서를 정합니다.
마크업 구조는 바뀌지 않습니다.

<style>
    .item--1 {
        order:4;
        background:#0080cc;
    }
    .item--2 {
        order:2;
        background:#cc3a2f;
    }
    .item--3 {
        align-self:center;
        order:1;
        background:#01cc49;
    }
    .item--4 {
        order:5;
        background:#cca514;
    }
    .item--5 {
        order:5;
        background:#9a25cc;
    }
</style>

RESULT