Flexbox에서 요소가 사용 가능한 공간을 수직으로 채우도록 하려면 어떻게 해야 합니까?

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

Flexbox 행에서 요소에 flex를 사용하면 요소가 늘어나 나머지 사용 가능한 공간을 채울 수 있습니다. 이제 질문이 생깁니다. 이 동작을 수직으로 복제할 수 있습니까?

설명된 시나리오에는 컨테이너에 다음 요소가 있더라도 한 요소가 상위 컨테이너의 높이에 수직으로 확장되도록 하는 Flexbox 행이 있습니다. 고정 높이. 요소를 절대적인 위치에 배치하는 동안 하단: 0; 실행 가능한 솔루션인 경우 Flexbox를 사용하여 원하는 결과를 찾습니다.

이를 달성하려면

1. flex-direction: flex 컨테이너의 열을 설정합니다.
2. 할당 flex: 남은 공간을 차지해야 하는 요소에 1.

다음은 데모:

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

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

이 예에서 flex: 1을 사용하는 flexbox 요소는 원하는 대로 상위 컨테이너의 전체 수직 공간을 채웁니다.

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