Flexbox 컨테이너 내에서 요소를 아래쪽 정렬하려면 어떻게 해야 합니까?

Flexbox: 하단 정렬 요소

하위 요소가 포함된 컨테이너 요소가 있고 맨 아래 하위 요소를 정렬하려는 경우 컨테이너 바닥에 수직으로 배치되는 다목적 Flexbox 레이아웃 모델은 효과적인 솔루션을 제공합니다.

예제에서 제공됨:

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

다음 레이아웃을 원합니다.

-------------------
| heading 1          |
| heading 2          | 
| paragraph text     |
| can have many      |
| rows               |
|                   |
|                   |
|                   | 
| link-button        |
-------------------

자동 여백 활용

자동 여백은 다음에서 편리한 도구임이 입증되었습니다. 이 시나리오. justify-content 및 align-self를 통한 정렬 프로세스 전에 남은 여유 공간은 해당 차원의 자동 여백에 자동으로 배포됩니다.

따라서 다음 CSS 규칙 중 하나 또는 둘 다를 사용할 수 있습니다.

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

구현 예

Flexbox 컨테이너와 결합하여 제안된 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>

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