在flexbox網格中將一些項目設置為高度的兩倍

Question

我正在嘗試創建一個包含兩列的簡單flexbox網格，但是可以選擇將其中一個子節點聲明為“特色”，使其成為普通子節點高度的兩倍，因此給出以下標記：

<div class="container">
    <div class="child featured">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
</div>

你最終得到這樣的東西（邊距/填充/邊框僅用於說明目的）：

然而，我似乎無法讓它工作，孩子們只是疊加在特色孩子下面而不是填滿可用空間。

我的基本CSS是：

.container {
    display: flex;
    flex-flow: column wrap;
}

.child {
    flex: 1 0 50%;
    height: 50vh;
    max-width: 50%;
}

.child.featured {
    height: 100vh;
}

知道我做錯了什么，或者是否有更好的方法（不使用JavaScript）？

Answer 1

Flexbox不支持此類網格。 但你可以使用浮點數來做到這一點：

 .child { float: left; height: 50vh; width: 50%; outline: 1px solid red; } .child.featured { height: 100vh; } 

 <div class="container"> <div class="child featured">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> </div> 

Answer 2

知道我做錯了什么，或者是否有更好的方法（不使用JavaScript）？

問題是flexbox不是為了創建簡單的網格而設計的。 一旦你要求像砌體布局（這就是你所追求的）之類的東西，你就需要僵屍和變通辦法來完成任務。

但是，這種布局可以在CSS Grid中輕松實現：

 .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } .child.featured { grid-row-end: span 2; } /* non-essential decorative styles */ .container { padding: 10px; border: 2px solid gray; background-color: lightgray; height: 50vh; } .child { background-color: deepskyblue; display: flex; align-items: center; justify-content: center; font-size: 1.3em; } 

 <div class="container"> <div class="child featured">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> </div> 

jsFiddle演示

有關使用flexbox時問題的完整說明以及Grid函數的工作原理，請參閱以下文章：

• 僅CSS的砌體布局，但水平排序的元素