특정 Flexbox 행을 확장하여 남은 수직 공간을 채우려면 어떻게 해야 합니까?

Flexbox로 수직 공간 균형 맞추기

Flexbox는 레이아웃 내에서 콘텐츠를 구성하는 강력한 메커니즘을 제공합니다. 그러나 다중 행 Flexbox에서 특정 행의 수직 공간 소비를 제어하는 ​​것이 어려울 수 있습니다.

예를 들어 세 번째 행을 확장하여 나머지 행을 차지하려는 시나리오가 있는 경우 수직 공간, Flexbox를 사용하여 이를 달성하는 방법은 다음과 같습니다.

먼저 외부 컨테이너(일반적으로 body 및 html 요소)와 상위 Flexbox 컨테이너가 있는지 확인하세요. (래퍼) 높이를 100%로 설정하여 브라우저 창의 전체 높이를 효과적으로 상속합니다.

다음으로 Flexbox 레이아웃 내 세 번째 행(#row3)에 집중하세요. 이 행에는 1보다 큰 flex 값을 할당하고 다른 행은 flex 값을 1 이하로 유지합니다. 이는 세 번째 행이 다른 행보다 더 많은 공간을 소비해야 한다는 신호를 브라우저에 보냅니다.

레이아웃을 더욱 구체화하려면 내부 열(#col1, #col2 및 #col3) 세 번째 행 내에서 100%로 설정합니다. 이렇게 하면 상위 컨테이너(#row3)의 전체 높이를 상속하고 그에 따라 높이를 조정할 수 있습니다.

예제 코드:

.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%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

이러한 조정을 구현합니다. 을 사용하면 세 번째 행의 높이가 동적으로 조정되어 브라우저 창에서 사용할 수 있는 나머지 수직 공간이 소모됩니다. 이는 세 번째 행이 확장되어 빈 공간을 채우고 필요에 따라 요소를 수직으로 수용하는 원하는 레이아웃을 제공합니다.

위 내용은 특정 Flexbox 행을 확장하여 남은 수직 공간을 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!