html - 具有灵活方向行和不同行高的Flex Gridlayout

我需要一个灵活的网格，每个网格单元都有相同的宽度，每一个网格单元都应该被包裹起来。但有些细胞应该是全宽的。到目前为止没有问题。
但我希望这些细胞有固定的高度。
在我的示例中，我希望蓝色背景被第一个背景下的单元格隐藏和填充在不添加更多html标记的情况下，这是可能的吗？
结果应该类似于第二个框，但没有额外的html标记。

.flex-container {
  background-color: blue;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 300px;
  height: 300px;
  border: red 5px solid;
}

.flex-item {
  background: tomato;
  width: 50%;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border: green 1px solid;
  box-sizing: border-box;
}

.flex-item:first-child {
  width: 100%;
  height: 50px;
}

.flex-container2 {
  background-color: blue;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 300px;
  height: 300px;
  border: red 5px solid;
}

.flex-item2 {
  background: tomato;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border: green 1px solid;
  box-sizing: border-box;
  height: 50px;
}

.additional-flex-container {
 -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: calc(100% - 50px);
  flex-grow: 1;
}

.additional-flex-container .flex-item2 {
  background: tomato;
  width: 50%;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border: green 1px solid;
  box-sizing: border-box;
  height: auto;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

<hr/>

<div class="flex-container2">
  <div class="flex-item2">1</div>
  <div class="additional-flex-container">
    <div class="flex-item2">2</div>
    <div class="flex-item2">3</div>
    <div class="flex-item2">4</div>
    <div class="flex-item2">5</div>
  </div>
</div>

最佳答案

我发现的唯一可能是计算所有物品的高度。它不像我想要的那样灵活，但我至少可以玩一些额外的课程。

.flex-container {
  background-color: blue;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 300px;
  height: 300px;
  border: red 5px solid;
}

.flex-item {
  background: tomato;
  width: 50%;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border: green 1px solid;
  box-sizing: border-box;
  height: calc((100% - 50px) / 2);
}

.flex-item:first-child {
  width: 100%;
  height: 50px;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

关于html - 具有灵活方向行和不同行高的Flex Gridlayout，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32481310/