CSS / Flex / display

Flexbox를 사용하려면 아이템들을 감싸는 부모에 display: flex 또는 display: inline-flex를 지정합니다. 두 값 모두 직접 자식을 Flex 아이템으로 배치하지만, 컨테이너 자체가 주변 요소와 놓이는 방식이 다릅니다. flex는 블록 수준, inline-flex는 글줄 안에 들어갈 수 있는 인라인 수준 컨테이너입니다.

바깥 배치와 안쪽 배치를 구분하기

일반 블록 흐름에서 너비를 auto로 둔 flex 컨테이너는 사용 가능한 가로 공간을 채웁니다. inline-flex는 너비를 따로 지정하지 않으면 내용과 사용 가능한 공간을 고려한 크기가 되어 주변 글자와 같은 줄에 놓일 수 있습니다. inline-flex가 아이템을 가로로, flex가 세로로 배치한다는 구분은 아닙니다. 두 값 모두 기본 주축 방향은 row입니다.

이 설명은 보통의 문서 흐름을 기준으로 합니다. 너비를 명시하거나 컨테이너 자체가 다른 Flex·Grid의 아이템이면 최종 크기와 바깥 배치 조건이 달라질 수 있습니다. inline-flex라고 언제나 정확히 자식 너비의 합만 차지한다고 단정하지 말고 계산된 크기를 확인하세요.

전체 예제: 블록 흐름·flex·inline-flex 비교

아래 코드를 flex-display.html로 저장하고 브라우저에서 엽니다. 외부 파일은 필요하지 않습니다. 첫 상자는 기본 흐름, 두 번째는 flex, 세 번째는 글자 사이의 inline-flex를 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex 컨테이너 display 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    h2 { margin: 18px 0 8px; font-size: 18px; }
    .examples { max-width: 560px; }
    .demo { padding: 8px; border: 1px solid #7d9db2; background: #edf4f8; }
    .item { padding: 8px; background: #176b86; color: white; }
    .normal .item + .item { margin-top: 8px; }
    .flex { display: flex; gap: 8px; min-height: 100px; }
    .inline-flex { display: inline-flex; gap: 8px; vertical-align: middle; }
    .inline-line { margin: 0; }
  </style>
</head>
<body>
<h1>display에 따른 배치 비교</h1>
<div class="examples">
  <h2>기본 블록 흐름</h2>
  <div class="demo normal">
    <div class="item">가</div><div class="item">나</div><div class="item">다</div>
  </div>
  <h2>display: flex</h2>
  <div class="demo flex">
    <div class="item">가</div><div class="item">나</div><div class="item">다</div>
  </div>
  <h2>display: inline-flex</h2>
  <p class="inline-line">앞 <span class="demo inline-flex"><span class="item">가</span><span class="item">나</span><span class="item">다</span></span> 뒤</p>
</div>
</body>
</html>

첫 상자의 div 아이템은 위아래로 쌓입니다. 두 번째 상자는 직접 자식들이 가로로 놓이며, 컨테이너가 차지하는 폭은 여전히 넓습니다. 세 번째 상자는 앞·뒤 글자 사이에서 내용에 맞는 크기로 표시됩니다. 아이템 사이 간격은 gap으로 주었습니다.

두 번째 .flex의 display만 block으로 바꾸면 다시 블록 흐름으로 돌아갑니다. 복원한 뒤 .inline-flex에 width: 100%를 추가하면 인라인 Flex라도 지정된 넓이를 사용해 앞뒤 글자와 같은 줄에 유지되지 않을 수 있습니다. 확인 후 width 선언을 제거합니다.

아이템 높이가 늘어나는 이유

두 번째 컨테이너에는 min-height: 100px를 주었고 아이템 높이는 지정하지 않았습니다. 기본적인 한 줄 row 배치에서 교차축 정렬이 stretch로 동작하면 아이템이 컨테이너의 안쪽 높이에 맞춰 늘어납니다. display: flex가 모든 자식의 width·height를 무조건 같은 값으로 만든다는 뜻은 아닙니다.

/* 전체 예제의 style 마지막에 추가해 비교 */
.flex {
  align-items: flex-start;
}

위 규칙을 추가하면 두 번째 상자의 아이템은 위쪽에 놓이고 내용에 필요한 높이만 차지합니다. 제거하면 원래의 늘어난 높이로 돌아갑니다. 높이를 고정한 아이템, 자동 여백, column 방향 등은 조건이 달라지므로 정렬 축과 크기 제약을 함께 확인해야 합니다.

Flex 아이템은 원칙적으로 컨테이너의 직접 자식입니다. 아이템 안의 손자 요소까지 같은 Flex 레이아웃이 자동으로 적용되지는 않습니다. 손자들을 Flex로 배치하려면 그들을 감싸는 요소에도 별도로 display: flex를 지정하는 중첩 구조를 사용합니다.

줄바꿈·축소와 긴 내용 확인하기

Flex의 기본 줄바꿈은 nowrap입니다. 공간이 부족하면 아이템이 축소될 수 있지만, 내용의 최소 크기 때문에 계속 넘칠 수도 있습니다. 여러 줄을 허용하려면 컨테이너에 flex-wrap: wrap을 추가합니다. 한 줄을 유지하면서 긴 문자열을 줄바꿈하려면 해당 아이템에 아래처럼 크기 제한과 줄바꿈을 함께 검토할 수 있습니다.

.flex .item {
  min-width: 0;
  overflow-wrap: anywhere;
}

min-width: 0은 아이템의 자동 최소 너비 제약을 완화하고, overflow-wrap: anywhere는 긴 URL처럼 공백이 없는 문자열에 줄바꿈 기회를 줍니다. 실제 내용의 가독성에 맞춰 적용하고, 모바일에서 페이지 전체가 옆으로 밀리지 않는지 확인하세요. 화면 폭에 따라 배치 방향을 바꾸려면 flex-direction의 반응형 예제를 참고할 수 있습니다.

바깥·안쪽 display 구분은 MDN display 문서, Flex 컨테이너와 아이템의 정의는 W3C Flexbox 명세에서 확인할 수 있습니다.