在 flexbox 列中並排設置兩個 flex 項

Question

我有一些元素在顯示中以列方向display: flex容器。

這會將容器放入堆疊視圖中。

假設我有 5 個堆疊元素，我需要讓其中兩個顯示內聯或彎曲方向行。

無需將有問題的兩個元素放入另一個 div中，我可以將 flex 方向行應用於...

是否有可能讓這些元素並排放置？

 .flex-column { display: flex; flex-direction: column; } .flex-column .column-item:nth-of-type(4), .flex-column .column-item:nth-of-type(5) { width: calc(50% - 10px); display: inline-block; float: left; } .flex-column .column-item:nth-of-type(4) { margin-right: 20px; }

 <div class="flex-column"> <div class="column-item">a</div> <div class="column-item">b</div> <div class="column-item">c</div> <div class="column-item">d</div> <div class="column-item">e</div> </div>

Answer 1

一旦你給你的父母flex-direction:column;我認為這是不可能的。 屬性，或者您可以啟用flex-wrap:wrap並使用flex-basis屬性控制元素的寬度。 這可以讓你在不改變你的html結構的情況下達到你想要的效果。

 .flex-column { display: flex; flex-wrap:wrap; } .flex-column .column-item { flex-basis:100%;} .flex-column .column-item:nth-of-type(4), .flex-column .column-item:nth-of-type(5) { flex-basis:50%; }

 <div class="flex-column"> <div class="column-item">a</div> <div class="column-item">b</div> <div class="column-item">c</div> <div class="column-item">d</div> <div class="column-item">e</div> </div>

Answer 2

使用 flexbox 的布局相當簡單。 您不需要flex-direction: column 。

只需使用flex-direction: row和flex-wrap: wrap 。

然后使每個元素足夠長以占據一整行。

減少要共享一行的元素的flex-basis 。

 .flex-column { display: flex; flex-wrap: wrap; } .column-item { flex: 1 0 61%; /* flex-grow, flex-shrink, flex-basis */ margin: 2px; background-color: lightgreen; } .column-item:nth-of-type(4), .column-item:nth-of-type(5) { flex-basis: 40%; }

 <div class="flex-column"> <div class="column-item">a</div> <div class="column-item">b</div> <div class="column-item">c</div> <div class="column-item">d</div> <div class="column-item">e</div> </div>

在flex簡寫中定義flex-grow: 1后，就不需要使用calc()了。

由於flex-grow會消耗行上的空閑空間，因此flex-basis只需要足夠大就可以強制執行換行。 在這種情況下，使用flex-basis: 61% ，邊距有足夠的空間，但沒有足夠的空間容納第二個項目。

---

使用 CSS Grid 有一個更簡單、更高效的解決方案：

 .flex-column { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px; } .column-item:nth-of-type(-n + 3) { grid-column: span 2; } .column-item { background-color: lightgreen; }

 <div class="flex-column"> <div class="column-item">a</div> <div class="column-item">b</div> <div class="column-item">c</div> <div class="column-item">d</div> <div class="column-item">e</div> </div>

Answer 3

嘗試使用flex-wrap: wrap ，它屬性在 flexbox 中啟用多行

Answer 4

 .flex-column { display: flex; flex-wrap:wrap; } .column-item { }

 <div class="flex-column"> <div class="column-item">a</div> <div class="column-item">b</div> <div class="column-item">c</div> <div class="column-item">d</div> <div class="column-item">e</div> </div>