Flexbox 레이아웃이 100 % 수직 공간을 차지하게하려면 어떻게해야합니까?

102

Flexbox 레이아웃 행이 브라우저 창에서 나머지 세로 공간을 사용하도록하려면 어떻게해야합니까?

3 행 플렉스 박스 레이아웃이 있습니다. 처음 두 행은 높이가 고정되어 있지만 세 번째 행은 동적이며 브라우저의 전체 높이로 확장하고 싶습니다.

여기에 이미지 설명 입력

행 3에 열 세트를 생성하는 또 다른 flexbox가 있습니다. 이 열 내에서 요소를 적절하게 조정하려면 브라우저의 전체 높이를 이해해야합니다. 주요 레이아웃은 궁극적으로 다음과 유사합니다.

여기에 이미지 설명 입력

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

스 니펫 확장

나는 height그것을 하드 번호로 설정하면 작동하지만으로 설정하면 작동하지 않는 속성을 추가하려고 시도 했습니다 100%. height: 100%콘텐츠가 브라우저 창을 채우지 않아 작동하지 않는다는 것을 이해 합니다.하지만 Flexbox 레이아웃을 사용하여 아이디어를 복제 할 수 있습니까?

html css flexbox

— 사악한 옷장 원숭이
소스

비주얼에 대한 찬성, 어떻게 만들었나요?

— Jonathan

수정을위한 OmniGraffle 및 Pixelmator.

— Evil Closet Monkey

답변:

115

당신은 설정해야합니다 height의 html, body, .wrapper로 100%(상속 전체 높이 순서대로) 다음 단지 설정 flex보다 값 더 1에 .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%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

스 니펫 확장

데모

— G- 키릴루스
소스

콘텐츠 div를 확장하여 콘텐츠를 채우는 동안 이렇게 할 수 있습니까? 여기에 귀하의 예를 포크했습니다 .

— iameli

@iameli, 크롬 대신 min-height를 사용하십시오 height fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddle는 brokened됩니다

— 조엘 Peltonen을

다음은 작동하는 코드 펜 데모입니다 : codepen.io/mprinc/pen/JjGQvae 및 유사한 질문에 대한 설명 : stackoverflow.com/a/63174085/257561

— mPrinC

사라지지 않아야하는 코드 펜으로 대체 된 바이올린은 snippet의 복사본입니다. 참고 최소 높이가 오늘날의 크롬 버전에서 더 이상 필요하지 않은 것이다.

— G-Cyrillus

래퍼를 높이 100 %로 설정

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

세 번째 행을 flex-grow로 설정하십시오.

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

데모

— vals
소스

제 경우에는 html, body, .wrapper {height : 100 %; } 작동합니다. 래퍼 작동뿐만 아니라.

— gnganpath

100 % 작동하는 다른 방법을 보여 드리겠습니다. 또한 예제를 위해 약간의 패딩을 추가합니다.

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

보시다시피 flex-grow 및 flex-direction 속성을 사용하는 동안 제어를위한 몇 개의 래퍼로이를 달성 할 수 있습니다.

1 : 부모 "flex-direction"이 "row"이면 자식 "flex-grow"가 수평으로 작동합니다. 2 : 상위 "flex-direction"이 "columns"이면 하위 "flex-grow"가 수직으로 작동합니다.

도움이 되었기를 바랍니다

다니엘

— GaddMaster
소스

div지나침.

— John

다음 중 하나를 제거 할 수 있습니다. flex-pad-y:)

— Eoin

좋은..! 이것은 내 "content"<div> (내 머리글과 바닥 글 사이)가 전체 화면 높이를 채우도록 관리 한 유일한 예입니다. 다른 모든 예는 "height : 100 %"속성을 무시하는 것 같습니다.

— Mike Gledhill

멋진 솔루션입니다. 나는 John이 DIV overkill 위에 말한 것을 알고 있지만 동의하지 않습니다. 플렉스를 수평 및 수직으로 확장하려면 4 개의 div가 필요합니다 (수직으로 중요한 요소였습니다!). 도와 드릴 수있어서 다행입니다! 4 개의 DIV가 있으면 많은 유연성이 제공됩니다. DIV를 제거하려고 시도하면 그 유연성이 시들기 시작합니다!

— GaddMaster