정의 및 사용 방법

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

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

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

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

'플렉스 아이템'의 특징

플렉스 컨테이너는 블록 컨테이너가 아니므로, 블록 레이아웃을 가정하고 설계된 일부 속성은 '플렉스 레이아웃' 환경에서는 적용되지 않습니다. 특히 '플렉스 아이템'은 다음과 같은 특징이 있습니다.

  • float 속성과 clear 속성은 '플렉스 아이템'에 아무런 영향을 주지 않습니다.
  • vertical-align 속성은 '플렉스 아이템'에 아무런 영향을 주지 않습니다.
  • ::first-letter 및 ::first-line 가상 요소는 '플렉스 컨테이너'에 적용되지 않으며,
    상위 요소인 '플렉스 컨테이너'에 설정한 ::first-letter 및 ::first-line 가상 요소로 선택되지 않습니다.
  • '플렉스 아이템'끼리는 마진(margin)이 합쳐지는 마진 상쇄(margin collapsing) 현상이 발생하지 않습니다.
  • '플렉스 아이템'은 새로운 쌓임 맥락(Stacking context)을 생성합니다. 따라서, position이 static이더라도 이로 인해 z-index를 사용한 요소의 겹침 순서 또는 주변 요소와의 겹침 순서가 달라지거나, 자식이나 자손 요소의 Containing Block이 재정의될 수 있습니다.
  • '플렉스 아이템'에 position: absolute나 position: fixed를 설정하면, 해당 아이템은 플렉스 레이아웃에 참여하지 않습니다.
  • '플렉스 아이템'에 position: absolute나 position: fixed를 설정하면, 해당 아이템은 플렉스 레이아웃에 참여하지 않습니다.
  • '플렉스 아이템'의 width: auto와 height: auto는 플렉스 레이아웃 설정에 따라 달라집니다.

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

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

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

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

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

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

'플렉스 컨테이너'에 지정하는 다양한 속성들
flex-direction 주축(main axis)의 방향을 설정합니다.
flex-wrap 플렉스 컨테이너의 줄바꿈 허용 설정을 설정합니다.
gap 플렉스 아이템 간격을 설정합니다.
justify-content 주축을 기준으로 플렉스 아이템의 정렬 방식 설정합니다.
align-items 교차축(cross axis)을 기준으로 플렉스 아이템의 정렬 방식 설정합니다.
align-content 여러 줄일 때 교차축 정렬 방식을 설정합니다.

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

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

'플렉스 아이템'에 지정하는 다양한 속성들
align-self 해당 플렉스 아이템만 교차축에서 정렬 방식을 재정의합니다.
flex-grow 플렉스 아이템이 주축에서 늘어나는 비율을 설정합니다.
flex-shrink 플렉스 아이템이 주축에서 줄어드는 비율을 설정합니다.
flex-basis 플렉스 아이템의 기본 크기를 설정합니다.
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

참고문헌

같이 보기