html - 具有 flex-direction 行和不同行高的 Flex Gridlayout

Question

我需要一个 flex 网格，其中每个网格单元格具有相等的宽度，它应该在每个第二个单元格之后换行。但是有些单元格应该有全宽。到目前为止没问题。

但我希望其中一些单元格具有固定高度。

在我的示例中，我希望蓝色背景被第一个单元格下方的单元格隐藏和填充。如果不添加更多 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>

Answer 1

我发现的唯一可能性是计算所有元素的高度。它不像我想要的那样灵活，但我至少可以玩一些额外的类(class)。

.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>