[CSS] 유연한 박스 레이아웃, CSS Flexbox

유연한 박스 레이아웃, CSS Flexbox

CSS Flexbox, 공식적으로 유연한 박스 레이아웃(Flexible Box Layout)이라고 불리는 이 기술은 웹 페이지의 요소를 효율적으로 배치, 정렬, 그리고 분배하기 위한 일차원 레이아웃 모델입니다. Flexbox는 복잡한 레이아웃을 단순화하고, 유연한 UI 디자인을 가능하게 합니다.

Flexbox의 기본 개념

1. 플렉스 컨테이너 (Flex Container): Flexbox 레이아웃을 적용할 부모 요소입니다. 이 컨테이너 안의 자식들은 플렉스 아이템이 됩니다. 컨테이너를 생성하기 위해, CSS의 display 속성에 flex 또는 inline-flex를 설정합니다.
2. 플렉스 아이템 (Flex Item): 플렉스 컨테이너 내부의 모든 직접적인 자식들은 플렉스 아이템이 됩니다.
3. 주 축 (Main Axis)과 교차 축 (Cross Axis): Flexbox는 주 축과 교차 축을 가지고 있습니다. 주 축은 플렉스 아이템이 배치되는 기본 방향이며, 교차 축은 주 축에 수직인 방향입니다. 상대적인 개념이기 때문에 Main이 x축이라면 Cross는 y축이 됩니다. Main이 y축이라면 Cross는 x축이 됩니다.

주요 속성

1. flex-direction: 플렉스 컨테이너의 주 축을 설정합니다. 값으로는 row, row-reverse, column, column-reverse가 있습니다. 여기서 'reverse'는 반대를 의미하기 때문에 'column-reverse' 같으면 아래에서 위로 쌓아 올라가는 방식입니다.
2. justify-content: 주 축을 따라 플렉스 아이템을 정렬합니다. 예를 들어, space-between, center, flex-start, flex-end 등이 있습니다.
3. align-items: 교차 축을 따라 플렉스 아이템을 정렬합니다. 값으로는 stretch, center, flex-start, flex-end 등이 있습니다.
4. flex-wrap: 플렉스 아이템이 컨테이너를 벗어날 때 줄 바꿈을 할지 설정합니다. nowrap, wrap, wrap-reverse가 있습니다. 자동 줄바꿈이 됩니다. 'reverse'는 반대 방향으로 쌓아집니다.
5. flex-flow: flex-direction과 flex-wrap을 한 번에 설정하는 단축 속성입니다.
6. align-content: 여러 줄의 플렉스 아이템을 교차 축을 따라 정렬합니다. stretch, center, flex-start, flex-end, space-between, space-around 등이 있습니다.
7. flex: 아이템이 컨테이너 내에서 차지할 공간의 비율을 설정합니다. flex-grow, flex-shrink, flex-basis의 단축 속성입니다.

장점

• 유연한 레이아웃을 쉽게 구현할 수 있어, 다양한 화면 크기에 맞는 반응형 웹 디자인을 손쉽게 할 수 있습니다.
• 주 축과 교차 축을 이용한 간편한 정렬과 배치로 복잡한 레이아웃도 쉽게 처리할 수 있습니다.
• 컨테이너 안의 아이템 크기가 다르더라도 깔끔한 레이아웃을 유지할 수 있습니다.

예제

HTML과 CSS 예제를 코딩하고 그 결과를 확인합니다.

caption: html과 css

 

위 예제에서 'flex-container'는 플렉스 컨테이너로 설정되어 있으며, 아이템들은 컨테이너 내에서 균등하게 공간을 차지합니다. 'justify-content'와 'align-items' 속성을 이용해 아이템들을 가로 방향으로 공간을 균등하게 분배하고 세로 방향으로 중앙에 배치합니다. 또한 padding 값을 20px을 주어 container를 보호하고 있습니다.

caption: 브라우저 결과