Flexbox를 사용하여 요소를 컨테이너 하단에 정렬하는 방법은 무엇입니까?

Flexbox를 사용하여 요소를 아래쪽에 정렬

Flexbox를 사용하면 요소를 컨테이너 아래쪽에 정렬할 수 있습니다. 다양한 하위 요소가 있는 div가 있고 하단에 .button 요소를 고정시키려는 경우 Flexbox가 솔루션을 제공합니다.

Flexbox는 다음을 사용하여 정렬을 수행하기 전에 여유 공간을 "자동 여백"에 분배합니다. 내용 정당화 및 자기 정렬. 이는 자동 여백을 사용하여 .button 요소를 흐름에서 제거하지 않고 아래쪽으로 밀어 넣을 수 있음을 의미합니다.

완료 방법은 다음과 같습니다.

Margin-Bottom 사용: 자동

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

이 규칙은 .button 요소를 포함한 다음 요소를

Margin-Top: Auto 사용

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

또는 이 규칙은 .button 요소와 모든 후속 요소를 맨 아래로 푸시합니다.

효과를 입증하려면 다음 HTML과 CSS:

.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>

이렇게 하면 고정된 높이의 컨테이너가 생성되며, 여기서 .button 요소는 단락의 텍스트 양에 관계없이 하단에 유지됩니다.

위 내용은 Flexbox를 사용하여 요소를 컨테이너 하단에 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!