Flexbox를 사용하여 공간을 수직으로 분배하려면 어떻게 해야 합니까?

수직 Flexbox 공간 분배

Flexbox 레이아웃을 행으로 처리할 때 사용 가능한 공간을 채우는 것은 간단합니다. 요소에 flex: 1을 사용하여 남은 공간을 소비해야 함을 나타낼 수 있습니다. 그러나 이를 수직으로 구현하는 것은 약간 까다로울 수 있습니다.

수직 Flexbox

수직 공간 분배를 구현하려면 다음 단계를 고려하세요.

1. 상위 컨테이너의 flex-
2. 요소가 남은 공간을 채우도록 하려면 flex를 할당하세요. 1.

예

다음은 코드 데모입니다.

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>

이 예에서 중간 요소의 flex 클래스는 수직 열의 남은 공간을 차지하고 다른 요소를 위쪽과 아래쪽으로 밀어냅니다.

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