Flexbox：每行4个项目
我正在使用弹性框显示8个项目，这些项目将动态调整我的页面大小。如何强制它将项目分成两行？（每行4个）？
这是一个相关的剪辑：
（或者，如果你更喜欢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>
富国沪深浏览 3450回答 3
3回答
-
摇曳的蔷薇
为.child元素添加宽度。margin-left如果你想要每行4 个，我个人会使用百分比。DEMO.child { display: inline-block; background: blue; margin: 10px 0 0 2%; flex-grow: 1; height: 100px; width: calc(100% * (1/4) - 10px - 1px);}
随时随地看视频慕课网APP
Html5
Html/CSS