Flexbox 행이 브라우저 창의 나머지 수직 공간을 채우도록 하려면 어떻게 해야 합니까?

Flexbox 레이아웃이 남은 세로 공간을 소비하도록 만들기

Flexbox 레이아웃의 세 번째 행은 브라우저 창의 남은 높이를 채우기 위해 동적으로 확장되어야 합니다. 이를 달성하려면 다음 단계를 따르세요.

1. html, 본문 및 상위 flexbox 컨테이너(.wrapper)의 높이를 100%로 설정하여 상위의 전체 높이를 상속합니다.
2. 세 번째 행(.row3)에만 1보다 큰 flex 값을 적용하고 다른 행은 원래 높이를 유지합니다. 이렇게 하면 .row3에 확장 기능이 제공됩니다.
3. 열이 전체 브라우저 높이를 인식하도록 .wrapper 클래스 내에 다음 코드를 추가하세요.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome needed this initially */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Chrome also needed this at one point */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome might need this for a bit */
}

위 내용은 Flexbox 행이 브라우저 창의 나머지 수직 공간을 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!