嘗試使用 Flex 框填充空白空間

Question

有沒有可能讓這個黃色方塊自然飄到空的灰色方塊上等等？ 每個 flex-item 代表一個組件，它們可以使用容器寬度的 50% 或 100%，但我在渲染它時只有這些信息。

我正在考慮只使用 flexbox，但我不知道是否可能。

 .flex-container { display: flex; width: 200px; height: 240px; background: grey; flex-wrap: wrap; align-content: flex-start; } .flex-item { width: 100px; height: 100px; } .red { background: red; } .blue { background: blue; width: 200px; } .yellow { background: yellow; } .green { background: green; }

 <div class="container"> <div class="flex-container"> <div class="flex-item red"></div> <div class="flex-item blue"></div> <div class="flex-item yellow"></div> <div class="flex-item green"></div> </div> </div>

Answer 1

使用 CSS-Grid 可以使用grid-auto-flow 屬性： grid-auto-flow: row dense;

這將盡可能密集地放置物品並自動重新排序。

1. 改變.flex-container { display: flex; } .flex-container { display: flex; }改為：更改.flex-container { display: grid; } .flex-container { display: grid; }使用CSS網格
2. 移除: .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } ，以除去不必要的撓曲特性
3. 改變.flex-item { width: 100px; } .flex-item { width: 100px; } to: .flex-item { min-width: 100px; } .flex-item { min-width: 100px; }這允許元件是widerr然后100px的。
4. 改變.blue { width: 200px; } .blue { width: 200px; } to: .blue { grid-column: span 2; } .blue { grid-column: span 2; }有該元素的寬度的兩倍。

 .flex-container { display: grid; width: 200px; background: grey; grid-auto-flow: row dense; } .flex-item { min-width: 100px; height: 100px; } .red { background: red; } .blue { background: blue; grid-column: span 2; } .yellow { background: yellow; } .green { background: green; }

 <div class="container"> <div class="flex-container"> <div class="flex-item red"></div> <div class="flex-item blue"></div> <div class="flex-item yellow"></div> <div class="flex-item green"></div> </div> </div>

Answer 2

我確實看到有一些關於此的評論，@Tacoshy 認為網格是更好的解決方案是正確的。 但是 - 這里是如何使用order和flex來做到這一點，因為 OP 指定了“使用 flexbox”：

（出於顯而易見的原因，我還將灰色div的高度從 240 更改為 300。）

 .flex-container { display: flex; width: 200px; height: 300px; background: grey; flex-wrap: wrap; align-content: flex-start; } .flex-item { width: 100px; height: 100px; } .red { background: red; order: 0; } .blue { background: blue; width: 200px; order: 2 } .yellow { background: yellow; order: 1; } .green { background: green; order: 3 }

 <div class="container"> <div class="flex-container"> <div class="flex-item red"></div> <div class="flex-item blue"></div> <div class="flex-item yellow"></div> <div class="flex-item green"></div> </div> </div>