CSS display: inline-flex 완벽 가이드

정의 및 사용 방법

display 속성이 inline-flex 값으로 설정된 요소는
외부 레이아웃에서는 인라인(inline) 요소처럼 배치되지만, 내부에서는 플렉스 레이아웃이 적용되는 플렉스 컨테이너를 생성합니다.

주요 특징

외부 레이아웃은 일반적인 문서 흐름(static/normal flow)에서 인라인(inline) 요소처럼 한 줄에 다른 요소와 나란히 배치됩니다.
내부 레이아웃은 블록(block) 요소처럼 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.
기본적으로 가로 너비는 콘텐츠의 크기만큼 차지합니다.
다만, 플렉스 아이템이나 그리드 아이템으로 사용되는 경우에는 컨테이너의 레이아웃 설정에 따라 달라질 수 있습니다.
플렉스 레이아웃 모델에 따라 콘텐츠를 배치합니다.

`flex`와 `inline-flex`의 차이

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

두 값 모두 내부 레이아웃에서는 플렉스 컨테이너(Flex Container)를 생성하며, 플렉스 레이아웃 모델에 따라 콘텐츠를 배치한다는 공통점이 있습니다.

플렉스 컨테이너(Flex Container)

'플렉스 컨테이너'란 CSS에서 플렉스 레이아웃을 생성할 수 있는 컨테이너를 말합니다.
이 요소는 플렉스 박스(Flexbox) 레이아웃 모델을 사용해 자식 요소(플렉스 아이템, flex item)를 배치합니다.

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

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

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

플렉스 컨테이너를 생성하는 요소는 플렉스 레이아웃에 대한 다음과 같은 속성을 적용할 수 있습니다. 이 속성들은 플렉스 아이템의 배치 및 정렬을 제어하는 데 유용합니다.

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

display: flex 또는 display: inline-flex로 설정한 요소는 '플렉스 컨테이너'가 됩니다. 이때, 플렉스 컨테이너의 자식 요소들은 '플렉스 아이템(flex item)'이라고 부르며, 이들을 어떻게 배치하고 정렬할지 제어할 수 있는 다양한 속성을 플렉스 컨테이너에 적용할 수 있습니다.

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

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

이러한 속성들은 플렉스 아이템의 배치와 정렬을 설정하는 데 유용합니다.

일반적이지 않은 문서 흐름에서의 레이아웃

일반적인 문서 흐름이 아닌, 플렉스 컨테이너인 요소 자체가 플렉스 아이템이나 그리드 아이템일 경우에,
해당 요소가 display: inline-flex라 하더라도 요소 앞과 뒤의 줄바꿈 발생 여부는 다음과 같이 구현됩니다.

플렉스 아이템으로 사용되는 경우에는 플렉스 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다. 따라서, display: inline-flex인 요소라고 하더라도 플렉스 컨테이너 설정에 따라 줄바꿈할 수 있습니다.
그리드 아이템으로 사용되는 경우에도 플렉스 아이템처럼 그리드 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다. 따라서, display: inline-flex인 요소라고 하더라도 그리드 컨테이너 설정에 따라 줄바꿈할 수 있습니다.

또한, position: absolute나 position: fixed와 같이 요소가 일반적인 문서 흐름(normal flow)에서 제거되는 경우에는 요소의 앞뒤 줄 배치 여부와 관계없이, 주변 요소의 흐름에 영향을 받지 않고 독립적으로 배치됩니다.

예제

다음은 일반적인 문서 흐름(static/normal flow)에서 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; /* 플렉스 컨테이너 생성: 외부에서는 인라인, 내부는 flex */
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;  /* 플렉스 아이템 간격 설정 */
    justify-content: center; /* 내부 아이템 중앙 정렬 */
}
.flex-item {
    background-color: #2196F3;
    color: white;
    padding: 10px;
}