如何指定多行 flexbox 布局的行高并拉伸剩余行答案

【问题标题】：How to specify row height of multi-line flexbox layout and have remaining rows stretch如何指定多行 flexbox 布局的行高并拉伸剩余行
【发布时间】：2015-07-14 06:42:04
【问题描述】：

我有一个多行 flexbox 布局，我想指定其中一行的高度，并让剩余的行拉伸以填充。如果我在下面设置蓝色 div 的高度，我会得到一堆空白空间。

#container {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
}
#one,
#two,
#four,
#five {
  flex: 1 1 49%;
}
#three {
  flex: 1 1 99%;
  background-color: blue;
  height: 15px;
  max-height: 15px;
}
#one {
  background-color: green;
}
#two {
  background-color: yellow;
}
#four {
  background-color: orange;
}
#five {
  background-color: violet;
}

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

【问题讨论】：

标签： css flexbox

【解决方案1】：

据我所知，这将需要行。

#container {
  display: flex;
  flex-wrap: nowrap;
  height: 500px;
  width: 500px;
  flex-direction: column;
}
.row {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}
.row:nth-child(2) {
  height: 15px;
  max-height: 15px;
}
.row div {
  flex: 1 0 auto;
}
#one {
  background-color: green;
}
#two {
  background-color: yellow;
}
#three {
  background-color: blue;
}
#four {
  background-color: orange;
}
#five {
  background-color: violet;
}

<div id="container">
  <div class="row">
    <div id="one"></div>
    <div id="two"></div>
  </div>
  <div class="row">
    <div id="three"></div>
  </div>
  <div class="row">
    <div id="four"></div>
    <div id="five"></div>
  </div>
</div>

JSfiddle Demo

【讨论】：

【解决方案2】：

如果你知道正好是三行，你可以使用calc：

#three {
  height: 15px;
}
#one, #two, #four, #five {
  height: calc((100% - 15px) / 2);
}

#container {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
}
#one, #two, #four, #five {
  flex: 1 1 49%;
  height: calc((100% - 15px) / 2);
}
#three {
  flex: 1 1 99%;
  background-color: blue;
  height: 15px;
}
#one { background-color: green; }
#two { background-color: yellow; }
#four { background-color: orange; }
#five { background-color: violet; }

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

【讨论】：