Flexbox 하위 요소를 수직 공간에 채우려면 어떻게 해야 합니까?

Flexbox: 세로 공간을 효율적으로 채우기

Flexbox 행에서 flex 속성을 활용하여 하위 항목에 사용 가능한 가로 공간을 분배할 수 있습니다. 강요. 그러나 이 개념을 수직으로 확장하는 것은 어려운 일입니다.

문제: 수직 공간 채우기

수직 Flexbox 레이아웃에서 일반적인 딜레마는 필요한 하위 요소가 남은 공간을 채우는 데 정의된 높이가 부족하여 요소가 서로 아래에 표시됩니다.

해결책: 정렬 Flexbox를 사용하여 세로로 콘텐츠

이 문제를 해결하려면 다음 접근 방식을 시도해 보십시오.

1. flex-direction: 컬럼: 상위 Flexbox에 대해 이 속성을 설정합니다. 컨테이너.
2. flex: 1: 이 값을 하위 요소에 할당합니다. 세로 공간을 채웁니다.

예:

다음 Flexbox 레이아웃을 고려하세요.

<div>

그리고 관련 CSS:

.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}

이 레이아웃은 ".flex" 요소가 나머지 부분을 차지하도록 보장합니다. 고정 높이 100vh(뷰포트 높이)를 갖는 상위 ".row" 컨테이너 내의 수직 공간.

위 내용은 Flexbox 하위 요소를 수직 공간에 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!