정의 및 사용 방법

'플렉스 아이템'이란 '플렉스 컨테이너'의 바로 아래 자식 요소를 말합니다.
플렉스 레이아웃 모델을 사용하여 아이템 단위로 배치되기 때문에 '플렉스 아이템'이라고 합니다.

원하는 요소에 display: flex 또는 display: inline-flex를 설정하면 플렉스 컨테이너(Flex Container)가 만들어집니다.

이렇게 만들어진 플렉스 컨테이너는 플렉스 박스 레이아웃 모듈(CSS Flexible Box Layout Module)이 적용되는 영역인데, 이는 일반적인 블록 레이아웃 대신 새로운 플렉스 레이아웃 규칙(flex formatting context)을 설정하는 '플렉스 레이아웃'이 사용됩니다.

'플렉스 레이아웃'은 관련 CSS 속성들을 사용해서 플렉스 컨테이너의 '플렉스 아이템' 단위로 흐름 방향, 배치, 정렬 등의 레이아웃을 구현합니다. 이처럼 아이템 단위로 배치되는 레이아웃이기 때문에, CSS에서는 이를 공식 명세서인 Flexible Box Layout Module로 정의합니다.

'플렉스 아이템'의 레이아웃 설정

'플렉스 아이템'의 레이아웃 설정은 크게 다음의 다음과 같이 분류할 수 있습니다.

  • 주 축(main axis)과 교차 축(cross axis)에서의 흐름 방향(예: 가로, 세로, 순서 등)
  • 주 축과 교차 축에서의 배치 및 정렬 기준(예: 여러 행 정렬, 단일 행 정렬, 위·중앙·아래, 좌·중앙·우 등)
  • 아이템 자체의 배치, 정렬, 크기 조정

플렉스 컨테이너에는 '플렉스 흐름 방향'과 아이템의 배치·정렬을 제어하는 다양한 속성이 있으며, '플렉스 아이템' 자체에도 이를 조정할 수 있는 속성들이 있습니다.

'플렉스 컨테이너'에 지정하는 다양한 속성

이 속성들은 플렉스 컨테이너에 지정하는 것이며, 대표적으로 다음과 같은 것들이 있습니다.

'플렉스 컨테이너'에 지정하는 다양한 속성들
flex-direction 주 축(main axis)의 방향을 설정합니다.
flex-wrap 아이템을 여러 줄로 나눌지 여부를 지정합니다.
gap 아이템 간격을 설정합니다.
justify-content 주 축을 따라 아이템의 정렬 방식을 설정합니다.
align-items 교차 축(cross axis)을 따라 아이템을 어떻게 정렬할지 결정합니다.

'플렉스 아이템'에 직접 지정하는 다양한 속성

이 속성들은 개별적인 '플렉스 아이템'에 직접 지정하여 각각의 동작이나 크기를 제어하며, 대표적으로 다음과 같은 것들이 있습니다.

'플렉스 아이템'에 지정하는 다양한 속성들
flex-grow 아이템이 주 축에서 늘어나는 비율을 설정합니다.
flex-shrink 아이템이 주 축에서 줄어드는 비율을 설정합니다.
flex-basis 아이템의 기본 크기를 설정합니다.
align-self 해당 아이템만 교차 축에서 정렬 방식을 바꿉니다.
order 아이템의 배치 순서를 변경합니다.

예제

다음은 '플렉스 레이아웃'에서 플렉스 아이템'의 레이아웃 설정의 이해를 돕기 위한 간단 예제입니다.

HTML 
<div class="flex-container">
    <div class="item item-1">1번 아이템 (순서: 2)</div>
    <div class="item item-2">2번 아이템 (순서: 3)</div>
    <div class="item item-3">3번 아이템 (순서: 1)</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    padding: 10px;
    border: 2px solid #333;
}
.item {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    flex: 1; /* 아이템들이 가로로 꽉 차게 설정 */
    text-align: center;
}

/* 플렉스 아이템 개별 속성(order)으로 순서 변경 */
.item-1 { order: 2; }
.item-2 { order: 3; }
.item-3 { order: 1; } /* 3번 아이템이 가장 앞으로 이동! */
실제 적용된 모습

명세서

플렉스 컨테이너(Flex Container)의 명세서 사양
명세서 사양
Flex Items CSS Flexible Box Layout Module Level 1
#flex-items

참고문헌

같이 보기