[css] flex 이해하기

flex 속성

 

justify-content

: flex-start, flex-end, center, space-between, space-around

요소 가로 정렬

 

* space-between : 요소 사이에 동일한 간격

* space-around : 요소 주위에 간격

 

 

align-items

: flex-start, flex-end, center, space-between, space-around, stretch

컨테이너 안에서 요소 세로정렬 지정

 

 

align-content

여러 줄들의 간격 지정, 한 줄인 경우 해당x

 

align-self

지정한 요소에만 적용 (ex. 이미 전체 요소에 align-items가 사용된 경우)

 

flex-direction

: row, row-reverse, column, column-reverse

-reverse : 요소의 start와 end의 순서도 뒤바뀐다.

column : justify-content 세로정렬, align-items 가로정렬

 

order

: ... -1, 0 (default), 1, 2 ...

 

flex-wrap

: nowrap, wrap, wrap-reverse

nowrap - 모든 요소를 한줄에

wrap -요소를 여러 줄에 걸쳐서

wrap-reverse -요소를 여러 줄에 걸쳐 반대로flex 속성

 

 

 

 

 

flexboxfroggy.com/#ko

Flexbox Froggy