与 flexbox 共享相同的项目高度

Question

如何让这 3 个 div 共享相同的行高并始终占据屏幕的整个高度？

即使只有 3 或 2 或 1 项。他们必须始终共享尺寸。

- 3 items means each item gets 33% height
- 2 items means each item gets 50% height
- 1 item means each item gets 100% height


<div id="flex">
  <div>Temperature</div>
  <div>Freeze</div>
  <div>Consumption</div>
</div>

#flex {
display: flex;
max-height: 100%;
align-content: center;
flex-direction: column;    
}


body {
margin:0;
padding:0;
}

#flex > div:nth-child(1){
background:blue;
}

#flex > div:nth-child(2){
background:red;
}

#flex > div:nth-child(3){
background:yellow;
}

更新：

请不要更改正文中的 height:100%，html 标签！

Answer 1

这可以通过绝对定位弹性容器来完成：

#flex {
   display: flex;
   align-content: center;
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   flex-direction: column;
}

#flex > div:nth-child(1) {
    flex: 1;
}

#flex > div:nth-child(2) {
    flex: 1;
}

#flex > div:nth-child(3) {
     flex: 1;
}

Updated codepen

Answer 2

对容器使用 justify-content:stretch;，对物品使用 flex-grow:1;。

.container{
  display:flex;
  flex-direction:column;
  justify-content:stretch;
  width:200px;
  height:100vh;
  border:1px solid blue;
}
.item{
  flex-grow:1; 
  width:100px;
  border:1px solid red;   
}

<h4>Red child divs will stretch to fill blue parent</h4>
<div class='container'>
  <div class='item'>One</div>
  <div class='item'>Two</div>
  <div class='item'>Three</div>
</div>

与 flexbox 共享相同的项目高度

Share same item height with flexbox

html

css

flexbox