Flexbox:每行4个项目 [英] Flexbox: 4 items per row
问题描述
我使用弹性框来显示8个可以动态调整页面大小的项目。我如何强制它将项目分成两行? (每行4个)?
下面是一个相关的剪辑:
(或者如果您更喜欢jsfiddle - < a href =http://jsfiddle.net/vivmaha/oq6prk1p/2/> http://jsfiddle.net/vivmaha/oq6prk1p/2/ )
.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);
}
这篇关于Flexbox:每行4个项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!