Flexbox 레이아웃이 전체 브라우저 창의 수직 공간을 채우도록 하려면 어떻게 해야 합니까?

Flexbox 레이아웃이 전체 수직 공간을 채우도록 만들기

Flexbox 레이아웃은 flex 속성을 설정하여 브라우저 창의 나머지 수직 공간을 사용하도록 구성할 수 있습니다. 이에 따라 행을 레이아웃합니다.

이를 달성하려면:

1. 높이를 설정하세요. 전체 높이를 상속하려면 html, 본문 및 Flexbox 래퍼를 100%로 설정하세요.
2. 높이를 채우기 위해 확장해야 하는 레이아웃 행에 1보다 큰 Flex 값을 할당하고 다른 행은 그대로 둡니다. 원래 높이입니다.

예는 다음과 같습니다.

.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; /* Set flex value greater than 1 */
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

이 접근 방식은 다음을 보장합니다. 레이아웃은 수직으로 정렬되며 세 번째 행이 확장되어 나머지 공간을 채웁니다. 열의 최소 높이 속성은 세 번째 행의 전체 높이를 상속하는지 확인하는 데 사용됩니다.

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