Flexbox 행이 남은 수직 공간을 채우는 방법은 무엇입니까?

Flexbox 레이아웃에서 세로 공간 활용률 100% 달성

Flexbox는 개발자가 반응성이 뛰어나고 동적인 레이아웃을 만들 수 있는 강력한 레이아웃 시스템입니다. 일반적인 시나리오 중 하나는 브라우저 창 내의 나머지 수직 공간을 자동으로 사용하는 Flexbox 레이아웃 행을 갖는 것입니다. 이 기사에서는 Flexbox 속성을 사용하여 이를 달성하는 방법을 살펴봅니다.

과제:

처음 두 행의 높이가 고정된 3행 Flexbox 레이아웃을 고려해 보세요. 문제는 브라우저 창의 남은 공간을 채우기 위해 세 번째 행을 세로로 늘려 콘텐츠를 그에 맞게 확장하는 것입니다.

해결책:

핵심 이 동작을 달성하려면 세 번째 행의 "flex" 속성을 1보다 큰 값으로 설정해야 합니다. 이는 flexbox가 고유 크기 이상으로 행을 늘리고 나머지 공간을 하위 항목에 분배하도록 지시합니다. 그러나 높이 속성을 100%로 설정하면 행 내의 콘텐츠가 브라우저 창을 자연스럽게 채우지 않기 때문에 작동하지 않습니다.

솔루션 구현:

이 레이아웃을 올바르게 구현하려면 다음 원칙이 적용되는지 확인하세요.

• html, 본문 및 상위 div(래퍼)를 100%로 설정합니다. 이 상속을 통해 세 번째 행이 브라우저 창의 전체 높이를 상속할 수 있습니다.
• 세 번째 행의 flex 속성을 1보다 큰 값으로 설정합니다(예: flex: 2). 이렇게 하면 행이 수직으로 늘어나 나머지 공간을 활용하게 됩니다.
• 세 번째 행 내의 열에 최소 높이 100%를 추가하는 것을 고려해 보세요. 대부분의 최신 브라우저에서는 필요하지 않지만 브라우저 간 호환성을 제공할 수 있습니다.

예제 코드:

.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 레이아웃을 쉽게 만들 수 있습니다. 브라우저 창의 나머지 수직 공간. 이 기술은 콘텐츠 높이가 크게 달라질 수 있는 반응형 디자인에 특히 유용합니다.

위 내용은 Flexbox 행이 남은 수직 공간을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!