我正在尝试获得一个不错的 Flexbox 网格来与电子商务产品一起使用,但不能完全按照我的意愿去做。
这是一个演示http://jsbin.com/acejes/9/edit
这可能是不可能的,我只是想检查一下我是否还有什么可以做的。
这是我的目标……</p>
- 必须是基于百分比的网格
- 第一列和最后一列与容器的侧面齐平
- 最后一行“浮动”离开
我的问题有点类似于How to align left last row/line in multiple line flexbox,但我特别想将 %s 用于“列”——我认为它更整洁,这意味着我知道我将拥有,如果我使用 32.5% 之类的 %,则连续说 3 列
我快到了,但是由于 justify-content 属性,最后一行被丢弃了。我希望最后一行向左“浮动”:
代码
上面的jsbin里面看我的代码比较容易,但是为了保存,这里放个小截图:
<div id="flexbox">
<div class="column">
<img src="http://placehold.it/350x150" title="" alt="" />
</div>
<div class="column">
<p class="product-title">Decorated Pink High Heels</p>
<p class="product-price">$25.99</p>
<p class="product-title">Decorated Pink High Heels</p>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
#flexbox {
display: flex;
flex-flow: row wrap;
width: 100%;
justify-content: space-between;
border: 3px solid black;
}
#flexbox .column {
width: 22%;
margin-bottom: 30px;
background-color: red;
}
img {
max-width: 100%;
}