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의 자식)이 수직으로 늘어나는 것을 방지합니다.

align-items를 사용하여 플렉스 항목을 세로로 가운데 정렬하는 경우 속성을 사용하면 스트레치가 자동으로 사라집니다.

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

  /*Vertical center alignment:*/
  align-items: center;
}

하지만 플렉스 컨테이너의 플렉스 아이템을 수직으로 정렬하고 싶지 않다면 어떻게 될까요?

그런 다음 CSS height를 사용할 수 있습니다. 속성의 max-content 플렉스 항목의 값:

.button {
  height: max-content;
}

이제 플렉스 항목 높이는 콘텐츠의 높이에 의해 결정됩니다. 이 버튼 예제에서는 14px(+ 버튼의 기본 패딩)인 텍스트입니다.

align-self를 사용할 수도 있습니다. 플렉스 항목의 속성:

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

이것은 max-content를 사용하는 것과 동일한 결과를 산출합니다. 간단한 사용 사례이지만 특정 컨텍스트에 따라 다릅니다(둘 다 시도).