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

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

div 컨테이너가 제목, 단락, 및 버튼이 있는 경우 단락의 텍스트 양에 관계없이 버튼을 컨테이너 아래쪽에 정렬하는 것이 바람직할 수 있습니다. 이 정렬은 Flexbox를 사용하여 효과적으로 수행할 수 있습니다.

자동 여백을 사용하여 이러한 하단 정렬을 수행하려면 다음 CSS를 적용할 수 있습니다.

p { margin-bottom: auto; }

이 지시어는 다음 요소를 모두 하단으로 푸시합니다. 컨테이너. 또는 다음을 사용하여 버튼 자체를 타겟팅할 수 있습니다.

a { margin-top: auto; }

이렇게 하면 버튼과 후속 요소가 아래쪽으로 푸시됩니다.

div 컨테이너 내에서 Flexbox 속성은 다음과 같이 설정됩니다. 다음은 다음과 같습니다.

.content {
  display: flex;
  flex-direction: column;
}

이러한 설정은 컨테이너 내의 하위 요소에 대한 열 레이아웃을 설정합니다. 제목에는 연속 요소 사이의 간격을 방지하기 위한 여백 값이 없습니다. 버튼의 자동 여백은 버튼이 일관되게 하단 위치를 차지하도록 보장합니다.

이러한 스타일 조정을 구현하면 다양한 텍스트 내용에 관계없이 버튼이 컨테이너 하단에 고정되어 원하는 레이아웃을 얻을 수 있습니다. 단락에서.

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