如何强制弹性框每行显示4个项目 [英] How to force a flex box to display 4 items per row
本文介绍了如何强制弹性框每行显示4个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用弹性框来显示8个项目，这些项目会随着我的页面动态调整大小。如何强制它将项目拆分为两行？ （每行4个）？
I'm using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?
这里是一个相关的剪辑：
Here is a relevant snip:
（或者如果你喜欢jsfiddle - a href =http://jsfiddle.net/vivmaha/oq6prk1p/2/> http://jsfiddle.net/vivmaha/oq6prk1p/2/ ）
(Or if you prefer jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
推荐答案
向 .child 元素添加宽度。我个人会使用 margin-left 上的百分比，如果您希望每行总共有4个。
Add a width to the .child elements. I personally would use percentages on the margin-left if you want to have it always 4 per row.
strong> DEMO
DEMO
.child {
display: inline-block;
background:blue;
margin:10px 0 0 2%;
flex-grow: 1;
height:100px;
width: calc(100% * (1/4) - 10px - 1px);
}
这篇关于如何强制弹性框每行显示4个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
