한 방향(행 또는 열)으로 아이템을 배치하고 남는 공간을 나눠 주는 1차원 레이아웃 방식. 부모에 display: flex를 주면 부모는 flex 컨테이너(Flex Container), 자식은 flex 아이템(Flex Item)이 된다. 아이템이 늘어서는 방향이 주축(Main Axis), 그에 수직인 방향이 교차축(Cross Axis)이다.
- 컨테이너 속성:
flex-direction(주축 방향, 기본row),flex-wrap,justify-content(주축 정렬),align-items(교차축 정렬),align-content(여러 줄의 정렬),gap - 아이템 속성:
flex-grow,flex-shrink,flex-basis,order,align-self flex-direction: column으로 바꾸면 주축이 세로가 되고,justify-content와align-items가 맡는 방향도 서로 바뀐다
flex 단축 속성
| 값 | 뜻 | 쓰임 |
|---|---|---|
| 기본값 | 0 1 auto | 늘지 않고, 공간이 모자라면 줄어든다 |
flex: 1 | 1 1 0 | 콘텐츠와 무관하게 남은 공간을 똑같이 나눈다 |
flex: auto | 1 1 auto | 콘텐츠 크기에서 출발해 늘고 준다 |
flex: none | 0 0 auto | 크기 고정 |
flex-basis: 0이면 콘텐츠 크기를 무시하고 공간 전체를 flex-grow 비율대로 나누고, auto면 콘텐츠 크기를 뺀 남는 공간만 나눈다.
자주 쓰는 패턴
- margin auto 밀어내기: 아이템에
margin-left: auto를 주면 남은 공간을 왼쪽 여백이 다 가져가서 오른쪽으로 붙는다. 내비게이션에서 메뉴 하나만 오른쪽에 붙일 때 쓴다.margin: auto면 가운데 → CSS 가운데 정렬 - 바닥에 붙는 푸터: 세로 flex 컨테이너에서 푸터에
margin-top: auto - 스크롤 없는 100% 레이아웃:
flex-direction: column; height: 100%컨테이너 안에서 본문에flex: 1; overflow: auto - 말줄임 + 아이콘: 텍스트 아이템에
overflow: hidden; text-overflow: ellipsis; white-space: nowrap. 줄어들지 않으면 아이템에min-width: 0을 준다(flex 아이템의 최소 너비 기본값이 콘텐츠 크기라서)
2차원 배치가 필요하면 CSS Grid가 낫다. 둘의 차이는 Flexbox와 Grid 비교 참고.