수직 Flexbox 공간 분배
Flexbox 레이아웃을 행으로 처리할 때 사용 가능한 공간을 채우는 것은 간단합니다. 요소에 flex: 1을 사용하여 남은 공간을 소비해야 함을 나타낼 수 있습니다. 그러나 이를 수직으로 구현하는 것은 약간 까다로울 수 있습니다.
수직 Flexbox
수직 공간 분배를 구현하려면 다음 단계를 고려하세요.
- 상위 컨테이너의 flex-
- 요소가 남은 공간을 채우도록 하려면 flex를 할당하세요. 1.
예
다음은 코드 데모입니다.
1 2 3 4 5 6 7 8 9 | body { margin: 0; }
* { box-sizing: border-box; }
.row {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex { flex: 1; }
.row, .row > * { border: 1px solid; }
|
로그인 후 복사
1 2 3 4 5 | <div class = "row" >
<div>some content</div>
<div class = "flex" >This fills the available space</div>
<div>another content</div>
</div>
|
로그인 후 복사
이 예에서 중간 요소의 flex 클래스는 수직 열의 남은 공간을 차지하고 다른 요소를 위쪽과 아래쪽으로 밀어냅니다.
위 내용은 Flexbox를 사용하여 공간을 수직으로 분배하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!