如何强制一个弹性框每行显示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屋!
查看全文