在 flexbox 网格中使一些项目成为高度的两倍

Question

我正在尝试创建一个简单的具有两列的 flexbox 网格，但是可以选择将 children 之一声明为 "featured" 使其成为正常高度的两倍 children，所以给定以下标记：

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

你最终会得到这样的结果（margins/padding/border 仅用于说明目的）：

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

我的基本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

Any idea what I'm doing wrong, or if there is a better approach to this (without resorting to JavaScript)?

问题在于 flexbox 的设计目的不仅仅是为了创建简单的网格。一旦您要求类似砖石布局的东西（这就是您所追求的），您将需要 flexbox 的技巧和变通方法来完成任务。

但是，这种布局可以很容易地在 CSS 网格中实现：

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

有关使用 flexbox 时出现的问题以及 Grid 函数如何工作的完整说明，请参阅此 post：

CSS-only masonry layout but with elements ordered horizontally

在 flexbox 网格中使一些项目成为高度的两倍

Make some items twice the height in a flexbox grid

html

css

flexbox

css-grid

jsFiddle demo