[CSS] 플렉스 (Flex) 컨테이너

플렉스 컨테이너는 CSS의 Flexible Box, 즉 Flexbox 레이아웃 모델에 따라 자식 요소를 배치하는 컨테이너입니다. Flexbox는 1차원 레이아웃 모델로, 요소들을 행(row) 또는 열(column)로 배치합니다.

플렉스 컨테이너를 생성하려면, 부모 요소에 display: flex; 또는 display: inline-flex;를 적용합니다. 이렇게 하면 해당 요소의 자식 요소들은 자동으로 플렉스 아이템이 됩니다.

플렉스 컨테이너에는 다음과 같은 속성들을 적용할 수 있습니다:

• flex-direction: 플렉스 아이템들이 배치되는 방향을 설정합니다. row (기본값), row-reverse, column, column-reverse 중 하나를 선택할 수 있습니다.
• flex-wrap: 플렉스 아이템들이 여러 줄로 나눠지게 할지 결정합니다. nowrap (기본값), wrap, wrap-reverse 중 하나를 선택할 수 있습니다. justify-content: 플렉스 아이템들을 주 축(main axis)에 대해 어떻게 정렬할지 결정합니다. flex-start, flex-end, center, space-between, space-around, space-evenly 중 하나를 선택할 수 있습니다.
• align-items: 플렉스 아이템들을 교차 축(cross axis)에 대해 어떻게 정렬할지 결정합니다. stretch (기본값), flex-start, flex-end, center, baseline 중 하나를 선택할 수 있습니다.
• align-content: 여러 줄의 플렉스 아이템들을 교차 축에 대해 어떻게 정렬할지 결정합니다. stretch (기본값), flex-start, flex-end, center, space-between, space-around, space-evenly 중 하나를 선택할 수 있습니다.

이러한 속성들을 사용하면, 플렉스 컨테이너 내의 플렉스 아이템들을 유연하게 배치하고 정렬할 수 있습니다.