我有一个用于显示产品的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>