마무리
이 장에서 배운 내용을 정리해 보겠습니다.
1. 플렉스 박스 레이아웃
플렉스 박스 레이아웃은 1차원 레이아웃 설계를 위해 CSS3에서 추가된 개념입니다. 플렉스 박스 레이아웃의 구성 요소는 다음과 같습니다.
|
구성 요소 |
설명 |
|
주축(main axis) |
플렉스 박스의 진행 방향과 수평한 축입니다. |
|
교차축(cross axis) |
주축과 수직하는 축입니다. |
|
플렉스 컨테이너(flex container) |
display 속성값으로 flex나 inline-flex가 적용된 요소입니다. |
|
플렉스 아이템(flex item) |
플렉스 컨테이너와 자식 관계를 이루는 태그 요소입니다. |
2. 플렉스 박스 레이아웃의 기본 속성
|
속성 |
설명 |
|
display |
flex, inline-flex 값을 지정하면 해당 요소가 플렉스 컨테이너가 됩니다. |
|
flex-direction |
플렉스 박스 레이아웃의 주축 방향을 지정합니다. |
|
flex-wrap |
플렉스 아이템의 자동 줄 바꿈 여부를 지정합니다. |
|
flex-flow |
flex-direction과 fled-wrap 속성을 한 번에 사용할 수 있는 단축 속성입니다. |