問題描述

我正在使用一個彈出框來顯示 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。