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