为了账号安全,请及时绑定邮箱和手机立即绑定

Flexbox:每行4个项目

Flexbox:每行4个项目

富国沪深 2019-09-19 09:36:48
我正在使用弹性框显示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>
查看完整描述

3 回答

?
摇曳的蔷薇

TA贡献1793条经验 获得超6个赞

.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);}


查看完整回答
反对 回复 2019-09-19
  • 3 回答
  • 0 关注
  • 3487 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信