CSS Flexbox에서 자식 요소가 세로로 늘어나는 현상 방지하기

버튼 하나가 들어 있는 flexbox 컨테이너가 있다고 가정해 보겠습니다.

<div class="container">
  <button class="button">Button</button>
</div>

justify-content 속성을 사용해 버튼(자식 요소)을 가로 방향으로 가운데 정렬하려고 하면 어떻게 될까요?

.container {
  height: 300px;
  display: flex;
  justify-content: center;
}

문제: 플렉스 항목이 부모 높이만큼 늘어남

위 코드를 적용하면 버튼(자식 요소)의 높이가 부모 요소의 높이(여기서는 300px)만큼 세로로 늘어나 버립니다.

아마 원하는 결과가 아니겠죠? 기본적으로 플렉스 항목(flex container의 자식 요소)은 교차 축(cross axis) 방향으로 stretch되도록 설정되어 있기 때문입니다.

플렉스 항목이 세로로 늘어나는 것을 막는 방법은 몇 가지가 있습니다.

방법 1: align-items로 세로 정렬하기

align-items 속성을 사용해 플렉스 항목을 세로 방향으로 가운데 정렬하면, stretch 동작은 자동으로 사라집니다.

.container {
  height: 300px;
  display: flex;
  justify-content: center;

  /*세로 방향 가운데 정렬*/
  align-items: center;
}

방법 2: height에 max-content 값 사용하기

그런데 플렉스 항목을 세로로 정렬하고 싶지 않다면 어떻게 해야 할까요?

이럴 때는 플렉스 항목 자체에 CSS height 속성의 max-content 값을 지정하면 됩니다.

.button {
  height: max-content;
}

이렇게 하면 플렉스 항목의 높이가 콘텐츠 크기에 맞춰 결정됩니다. 이 예제에서는 텍스트가 콘텐츠이므로, 버튼 높이는 텍스트 높이인 14px에 버튼의 기본 패딩(padding)을 더한 값이 됩니다.

방법 3: align-self 활용하기

플렉스 항목에 align-self 속성을 사용하는 방법도 있습니다.

.button {
  align-self: flex-start;
}

flex-start, center, flex-end 등의 값을 사용하면 해당 항목만 개별적으로 교차 축 정렬 방식을 바꿀 수 있으며, stretch 상태도 함께 해제됩니다.

간단한 사용 사례에서는 max-content를 사용한 것과 같은 결과를 얻을 수 있지만, 실제로는 레이아웃 구조와 요구 사항에 따라 최적의 방법이 달라질 수 있습니다. 두 가지 방식을 모두 적용해 보고 상황에 맞는 것을 선택하는 것이 좋습니다.