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

정의 및 사용 방법

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

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

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

이렇게 만들어진 '플렉스 컨테이너'의 직계 자식을 '플렉스 아이템(Flex Item)'이라고 하며,
'플렉스 컨테이너'는 플렉스 박스 레이아웃 모델(Flex Layout Box Model)을 사용해 콘텐츠인 '플렉스 아이템'에 대해 새로운 '플렉스 레이아웃' 규칙(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로 계산됩니다.

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

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

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

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

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

float 속성과 clear 속성은 '플렉스 아이템'에 아무런 영향을 주지 않습니다.
vertical-align 속성은 '플렉스 아이템'에 아무런 영향을 주지 않습니다.
::first-letter 및 ::first-line 가상 요소는 '플렉스 컨테이너'에 적용되지 않으며,
'플렉스 컨테이너'의 상위 요소가 설정한 ::first-letter 및 ::first-line 가상 요소로 선택되지 않습니다.

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

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

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

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

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

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

'플렉스 아이템'에 고정 크기가 지정되어 있지 않으면 컨테이너보다 작을 경우 교차 축(cross axis) 방향으로 가득 채우도록 늘립니다.

예제

다음은 일반적인 문서 흐름에서 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;
}

브라우저 호환성

display 속성의 flex 및 inline-flex 값에 대한 브라우저 호환성
속성과 값	데스크탑 Chrome	데스크탑 Edge	데스크탑 Firefox	Safari
`display: flex`	29	12	20	9
`display: inline-flex`	29	12	20	9

명세서

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

참고문헌

MDN - Basic concepts of flexbox

같이 보기

CSS display 속성 완벽 이해