| 컨테이너 | ||
|---|---|---|
| flex | inline-flex | 요소를 플렉스 컨테이너로 만듭니다. | |
| row | column | row-reverse | column-reverse | 아이템이 흐르는 주축을 설정합니다. | |
| flex-start | center | space-between | space-around | space-evenly | 주축을 따라 아이템을 배분합니다. | |
| stretch | center | flex-start | flex-end | baseline | 교차축을 따라 아이템을 정렬합니다. | |
| flex-start | center | stretch | space-between | 교차축에 여유 공간이 있을 때 줄바꿈된 행을 정렬합니다. | |
| nowrap | wrap | wrap-reverse | 줄어드는 대신 아이템이 새 줄로 넘어가게 합니다. | |
| 0.5rem | 8px 16px | 아이템 사이의 간격. 가로와 세로 모두에 적용됩니다. | |
| 아이템 | ||
| 0 | 1 | 2 | 형제와의 상대 비율로 아이템이 남은 공간을 얼마나 흡수하는지. | |
| 0 | 1 | 공간이 부족할 때 아이템이 얼마나 줄어드는지. | |
| auto | 200px | 50% | 남은 공간을 나누기 전의 시작 크기. | |
| 1 | 1 0 auto | 0 0 200px | grow shrink basis의 축약형. | |
| auto | center | flex-start | flex-end | stretch | 한 아이템에서 컨테이너의 align-items를 덮어씁니다. | |
| 0 | -1 | 2 | 소스를 바꾸지 않고 아이템의 순서를 바꿉니다. | |