[CSS] flexbox 레이아웃

flexbox 레이아웃

<div class="flex-container">

<div class="flex-item">F</div>

<div class="flex-item">l</div>

<div class="flex-item">e</div>

<div class="flex-item">x</div>

</div>

※ flex 효과를 주려면display : flex값을 주어야 한다.

# flex-container

flex-direction (row/column/row-reverse/column-reverse) 

-> 이 속성에 따라서 주축과 교차축이 바뀌게 되니 유의!

justify-content (주축기준 , 좌 우)

flex-start

center

flex-end

space-between (a,b 사이 공간)

space-around (a,b주위의 모든 공간)

space-evenly (공간을 동일하게)

row(column)-reverse

align-content (교차축기준, 상 하)

flex-start

flex-end

center

space-between

space-around

stretch

flex-wrap

nowrap(기본값, 부모박스의 영향을 받지않음) / wrap / wrap-reverse

# flex-item

flex-direction

row / row-reverse / column / column-reverse

justify-content 

flex-start / flex-end / center / space-between/ space-around

align-content (그룹으로)

flex-start / flex-end / center / space-between/ space-around / stretch

align-items (item 개별적으로)

flex-start / flex-end / center / baseline(글자라인) / stretch(기본값)

flex-wrap 

nowrap / wrap / wrap-reverse

flex-basis -> width값이랑 같다고 보면됨

* 속기형

flex : grow shrink basis

아이템 순서 설정하기

order 

숫자값 (-1 ->0 ->1 ->2 . . .) / 숫자가 같다면 마크업 순서대로

flex ( flex 아이템 속성)

flex : flex-grow / flex-shrink / flex-basis

flex-grow - > 기본 값 0 (1이되면 폭의 값을 꽉 채우게됨)

flex-shrink -> 기본 값 1

flex-basis -> 기본 값 auto

align-self ( 자식 자신한테만 설정할 때)

auto / flex-start / flex-end / center / baseline / stretch