在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的砌体布局，但水平排序的元素