2
我需要一个柔性网格，其中每个网格单元格具有相同的宽度，每隔一个单元格后它应该包裹。但一些细胞应该有全宽。到目前为止没有问题。柔性网格布局，具有柔性方向行和不同高度的行
但我希望这些单元中的一些具有固定的高度。
在我的例子中，我想让蓝色背景被第一个单元格下面的单元格隐藏并填充。这可能没有添加更多的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>
你试过http://flexboxgrid.com/？ – Coreus
这个应该看起来如何，也许有9个盒子的图像将是有用的，因为我不能完全设想这只与一个包含元素的工作。 “一些”元素将会有更高的高度。这是一个固定的价值，他们都是你试图*石工*场景。 –
我添加了第二个框来显示所需的结果。 – Christian