css flex속성

css flex속성

부모요소 container

자식요소 item

 

(부모요소에 주는 속성)

1. display를 유연한 박스로 변경

display: flex;

2. 주축방향 지정 flex-direction

속성값 row/ column/ row-reverse/ column-reverse

3. 감싸기 지정 flex-wrap

속성값 nowrap(기본 한줄)/ wrap/ wrap-reverse

 

*주축방향 감싸기 속성법*

flex-flow: row wrap;

 

4. 주축 정렬 justify-content

속성값 flex-start/ flex-end/ center/ space-between/ space-around

5. 교차축 정렬

1)주축이 한줄일때 align-items

속성값 stretch/ flex-start/ flex-end/ center

2)주축이 여러축일때 align-content

속성값 flex-start/ flex-end/ center/ space-between/ space-around

 

(자식요소에 주는 속성)

order 순서 낮은값이 먼저 배치

ex) order: -1;

align-self