如何强制一个弹性框每行显示4个项目？ [英] How to force a flex box to display 4 items per row?
本文介绍了如何强制一个弹性框每行显示4个项目？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用弹性框来显示8个项目，这些项目将动态调整页面的大小。我如何强制它分成两行的项目？ （每行4个）？
这里是一个相关的剪辑：
（或者，如果您更喜欢jsfiddle -
$ b $（$ j $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
.parent-wrapper {height：100％;宽度：100％; border：1px solid black;}。parent {display：flex; font-size：0; flex-wrap：wrap; margin：-10px 0 0 -10px;}。child {display：inline-block;背景：蓝色; margin：10px 0 0 10px; flex-grow：1; < 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个百分比。 .child {
display：inline-block;
背景：蓝色;
保证金：10px 0 0 2％;
flex-grow：1;
height：100px;
width：calc（100％*（1/4） - 10px - 1px）;
}
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:
(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>
解决方案
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.
.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屋！
查看全文
