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

Flexbox: 사용 가능한 수직 공간 채우기

가로 Flexbox 행에서 요소에 "flex" 속성을 사용하면 요소가 확장되고 사용 가능한 수평 공간을 채웁니다. 비슷한 효과를 수직으로 얻고 싶다면 어떻게 해야 할까요?

수직 요소가 나머지 공간을 채우기 위해 확장되어 다른 요소가 수직으로 쌓일 수 있도록 하는 것이 과제입니다. 이 문제를 해결하려면 다음 flexbox 속성을 사용할 수 있습니다.

• flex-direction: column은 flex 컨테이너에서 요소를 수평이 아닌 수직으로 정렬합니다.
• flex: 1 남은 공간을 채워야 하는 요소에서 해당 요소가 성장하여 나머지 공간을 차지하도록 허용합니다. height.

다음 예를 고려하세요.

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

이 설정에서 .row 컨테이너는 높이 100vh를 사용하여 브라우저 뷰포트의 고정 높이를 갖습니다. .flex 요소에는 flex: 1이 있어 나머지 수직 공간을 확장하여 채웁니다. 결과적으로 다른 두 요소는 .row 컨테이너 내에 수직으로 쌓입니다.

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