CSS 保持所有 flexbox 子元素的大小相同

Question

我的代碼顯示在這個 JSFiddle 中：

 #container { align-content: flex-start; background-color: red; display: flex; flex-flow: row wrap; height: 200px; justify-content: space-around; padding: 10px; width: 400px; } .child-item { background-color: yellow; flex-basis: 75px; flex-grow: 1; height: 20px; margin: 10px; width: 75px; }

 <div id="container"> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> </div>

雖然，我希望底部的兩個項目與頂部的項目相同。

我不想將它們向左浮動並固定它們的寬度，這不適用於我在其他分辨率下的安排。

Answer 1

你有兩種方法來做到這一點：

flex-grow: 0 ( fiddle )

如果您將flex-grow設置為 0，您是在告訴項目保持它們的寬度並擴大空白空間。 使用flex-grow: 1項目將擴展寬度以適應空間。

隱形物品（小提琴）

在具有相同 flex 屬性的普通項目之后添加一些不可見的項目。 您將獲得左對齊的外觀。

在此解決方案中，所有可見行中的項目數量將相同，因此請確保添加足夠的不可見項目以在更大的屏幕上正常工作。

Answer 2

我無法回復 Igor 的回答以建議改進他的解決方案，但他的小提琴並不完全適用於響應式布局。

使用flex-grow: 0;的第一個解決方案flex-grow: 0; 不會拉伸物品以填充容器。 帶有隱形物品的第二種解決方案有效，但會擴大容器的高度。 不過，刪除頂部/底部邊距確實有效。

我編輯了 jsfiddle，使其既響應又修復容器擴展的隱形項目，使用注釋來解釋我更改的內容。 如果容器大於項目行，它仍然不起作用：（小提琴）

我也做了我自己的簡單解決方案。 我試圖自己做這件事，Igor 的解決方案幫了大忙。 （小提琴）

 .container { display: flex; flex-flow: row wrap; /*style*/ padding: 0.5em; background-color: royalblue; } .item { flex: 1 0 80px; /*style*/ margin: 0.5em; padding: 1em; text-align: center; background-color: lightblue; } .filler { flex: 1 0 80px; height: 0px; /*style*/ margin: 0 0.5em; padding: 0 1em; }

 <div class="container"> <div class="item">sm</div> <div class="item">medium</div> <div class="item">large item</div> <div class="item">medium</div> <div class="item">medium</div> <div class="item">large item</div> <div class="item">sm</div> <div class="item">sm</div> <div class="item">medium</div> <div class="item">large item</div> <div class="item">medium</div> <div class="item">medium</div> <div class="item">large item</div> <div class="item">sm</div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> </div>

Answer 3

你可以嘗試設置flex-basis: 50%; 和flex-grow: 1 。

 .parent { display: flex; width: 300px; height: 300px; } .child { flex-basis: 50%; flex-grow: 1; background: tomato; border: 1px solid #ccc; }

 <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div>

Answer 4

您可以讓項目停止在元素 ( fiddle ) 上使用max-width擴展。 要使它們左對齊，請在包裝器 ( fiddle ) 上使用不同的justify-content 。

希望這有效！ 只在 Chrome 中查看過這個。

Answer 5

Flex base 受 min-width 和 max-width 的限制，所以在這種情況下，如果您將 max-width 設置為等於您的 flex base，您將獲得所需的結果。

這也保留了您的對齊屬性——這意味着如果您在一行中有 5 個項目而剩下兩個項目，則剩余項目仍將在頁面上居中且大小正確。

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)
       @include max-width(190px)

Answer 6

對於這類問題，我只使用浮動。

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}