问题描述

我正在使用一个弹出框来显示 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>

最佳解决办法

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

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。