我有一個用於顯示產品的4列Flexbox網格。所有產品的寬度都爲25%,但是如果只有1種產品的寬度爲75%,我怎麼能確保網格不會中斷?例如,我可以在一行上顯示2種產品?具有多寬度色譜柱的Flexbox網格
有沒有一種方法,使用flexbox,給予更廣泛的75%網格項目的優先權,以便它自動調整/移動網格,以確保它不會像現在這樣破壞?
的jsfiddle(代碼在底部)
https://jsfiddle.net/kdjkc15g/
這就是我想要實現:
CSS
.grid-uniform {
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.grid__item {
width: 25%;
display: -ms-flex;
display: -webkit-flex;
display: flex;
padding-left: 20px;
position: relative;
margin-bottom: $gutter*2;
}
.grid__item.featured-product {
width: 75%;
}
HTML
<div class="flex-grid">
<div class="grid-uniform">
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
...
</div>
</div>