Flexbox를 사용하여 요소를 컨테이너 하단에 정렬하려면 어떻게 해야 합니까?

Flexbox를 사용하여 요소를 하단에 정렬

제공된 시나리오에는 다양한 하위 요소가 포함된 div 컨테이너가 있습니다. 텍스트 높이에 관계없이 버튼이 항상 아래쪽에 배치되어 요소가 수직으로 쌓이는 레이아웃을 구현하는 것이 목표입니다.

Flexbox는 자동 여백을 통해 이 문제에 대한 솔루션을 제공합니다. 자동 여백을 사용하면 정렬 전에 자동 여백이 있는 요소에 남은 공간을 분배할 수 있습니다. 원하는 레이아웃을 얻는 한 가지 방법은 다음 CSS를 사용하는 것입니다.

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

또는 다음과 같은 플렉스 레이아웃을 사용할 수 있습니다.

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

이 접근 방식은 다음을 보장합니다. 텍스트 요소는 사용 가능한 높이에 맞게 확장되고 버튼은 컨테이너 하단으로 눌려집니다.

위 내용은 Flexbox를 사용하여 요소를 컨테이너 하단에 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!