CSS 플렉스 컨테이너(Flex Container)

정의 및 사용 방법

'플렉스 컨테이너'란 CSS에서 '플렉스 레이아웃'을 생성하는 컨테이너입니다.

'플렉스 컨테이너' 만들기

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

이렇게 만들어진 '플렉스 컨테이너'의 바로 아래 자식을 플렉스 아이템(Flex Item)이라고 하며,
'플렉스 컨테이너'는 플렉스 박스 레이아웃 모듈(CSS Flexible Box Layout Module)을 사용해 콘텐츠인 '플렉스 아이템'에 대해 새로운 '플렉스 레이아웃' 규칙(flex formatting context)을 설정합니다.

'플렉스 컨테이너'의 외부 레이아웃

display: flex 또는 display: inline-flex로 설정한 요소는 '플렉스 컨테이너'가 됩니다. 이 두 설정은 모두 플렉스 컨테이너를 생성하지만 다음과 같은 차이가 있습니다.

display: flex는 블록 레벨의 '플렉스 컨테이너'를 생성합니다.
display: inline-flex는 인라인 레벨의 '플렉스 컨테이너'를 생성합니다.

블록 레벨(block-level): 문서 흐름 맥락에서 새로운 블록(영역) 박스 수준의 레이아웃을 형성하는 요소를 말합니다. 다른 표현으로 '블록 레벨 요소'라고도 부릅니다.
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈시키고, 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.

인라인 레벨(inline-level): 문서 흐름 맥락에서 현재 영역 박스 안에서 텍스트처럼 줄 안에서 배치(inline)되는 콘텐츠 박스 수준의 레이아웃을 형성하는 요소를 말합니다. 다른 표현으로 '인라인 레벨 요소'라고도 부릅니다.
일반적인 문서 흐름 맥락에서 한 줄에 다른 요소와 나란히 배치됩니다. display: inline-flex는 인라인 레벨이지만, 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.

`flex`와 `inline-flex`의 레이아웃 차이를 요약한 표입니다.
구분	외부 레이아웃	내부 레이아웃
`flex`	`block`	플렉스 컨테이너(Flex Container)
`inline-flex`	`inline`	플렉스 컨테이너(Flex Container)

요소가 display: inline-flex로 설정되어 있는 경우,
해당 요소에 float 속성으로 인해 띄워진 경우(none이 아닌 값을 가지는 경우)나, position: absolute나 position: fixed와 같은 요소가 일반적인 문서 흐름(normal flow)에서 제거되는 경우에는 display: flex로 계산됩니다.

'플렉스 컨테이너'의 내부 레이아웃

'플렉스 컨테이너'는 플렉스 박스 레이아웃 모듈(CSS Flexible Box Layout Module)을 사용해 콘텐츠인 플렉스 아이템에 대해 새로운 플렉스 레이아웃 규칙(flex formatting context)을 설정하는데, 이는 일반적인 블록 컨테이너를 설정하는 것과 동일하지만, 블록 레이아웃 대신 '플렉스 레이아웃'이 사용됩니다.

예를 들면, 다음과 같은 특징이 있습니다.

float 속성은 '플렉스 컨테이너' 내부로 침범하지 않습니다.
'플렉스 컨테이너'의 margin은 내부 콘텐츠의 margin과 합쳐지지(collapsing) 않습니다.
overflow 속성은 '플렉스 컨테이너'에도 적용됩니다.

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

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를 설정하면, 해당 아이템은 플렉스 레이아웃에 참여하지 않습니다.
'플렉스 아이템'의 width: auto와 height: auto는 플렉스 레이아웃 설정에 따라 달라집니다.

'플렉스 컨테이너'의 레이아웃 관련 속성

블록 레이아웃과 인라인 레이아웃은 각각 블록 및 인라인 흐름 방향에 치우친 레이아웃 계산을 하는 반면 '플렉스 레이아웃'은 '플렉스 흐름 방향'을 기반으로 레이아웃을 계산합니다.

이때, '플렉스 컨테이너'에는 '플렉스 흐름 방향'을 제어하고, 플렉스 아이템을 어떻게 배치하고 정렬할지 지정할 수 있는 다양한 속성이 있습니다.

이 속성들은 '플렉스 레이아웃'을 위한 것이며, 대표적으로 다음과 같은 것들이 있습니다.

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

display: flex 또는 display: inline-flex로만 설정된 '플렉스 컨테이너'는 아래처럼 레이아웃 관련 속성의 기본값이 지정됩니다.

flex-direction: row

'플렉스 아이템'들은 행(row) 방향으로 설정됩니다.
flex-wrap: nowrap

'플렉스 아이템'들은 한 줄에 배치합니다.

'플렉스 컨테이너' 영역을 벗어나 넘치더라도 줄바꿈(soft wrap)을 시도하지 않습니다.
gap: normal

'플렉스 아이템'들의 간격은 0으로 계산됩니다.
justify-content: flex-start

'플렉스 아이템'들은 flex-direction으로 설정된 주축(main axis) 방향의 시작점을 기준으로 정렬합니다.
align-items: stretch

'플렉스 아이템'이 크기에 대한 제약 조건이 없다면, '플렉스 아이템'들이 교차축 방향으로 여유 공간이 있으면 채우도록 늘어납니다.

예제

다음은 일반적인 문서 흐름에서 display: flex를 사용하여 '플렉스 컨테이너'를 구성한 간단한 예제입니다.

HTML

<div class="flex-container">
    <div class="flex-item">child 1</div>
    <div class="flex-item">child 2</div>
    <div class="flex-item">child 3</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 2px solid #333;
    padding: 10px;
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    justify-content: center; /* 플렉스 아이템들을 수평 중앙 정렬 */
}
.flex-item {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}

다음은 일반적인 문서 흐름에서 display: inline-flex를 사용하여 플렉스 컨테이너를 구성한 간단한 예제입니다.

HTML

<div class="block-container">
    <span>일반 텍스트 앞</span>
    <div class="inline-flex-container">
        <div class="flex-item">child 1</div>
        <div class="flex-item">child 2</div>
        <div class="flex-item">child 3</div>
    </div>
    <span>일반 텍스트 뒤</span>
</div>

CSS

.block-container {
    border: 2px solid #999;
    padding: 10px;
}
.inline-flex-container {
    display: inline-flex; /* 플렉스 컨테이너 생성: 외부에서는 inline, 내부는 Flex Container */
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;  /* 플렉스 아이템 간격 설정 */
    justify-content: center; /* 내부 아이템 중앙 정렬 */
}
.flex-item {
    background-color: #2196F3;
    color: white;
    padding: 10px;
}