html - 在 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>

你最终会得到这样的东西(边距/填充/边框仅用于说明目的):

但是我似乎无法让它工作，所有的 child 都只是堆叠在有特色的 child 下面，而不是填充可用空间。

我的基本 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 不支持这样的网格。但是您可以使用 float 来做到这一点:

.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>