在 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)?

- Bobe

---

什么是问题？由于height: 100vh CSS规则，特色div应该高度加倍。 - Eduard Void

@EduardVoid 高度是正常的，但子元素没有填充可用空间，它们只是在特定子元素下面堆叠。 - Bobe

你必须使用嵌套的 flexbox 才能实现这个。你可以在容器内创建一个 flexbox，它将仅包含子元素 1、2 和 3。 - Eduard Void

要增加或缩小元素，您应该定义容器的大小。 - Eduard Void

使用flexbox，这种网格需要容器具有固定的高度。然后可以使用column wrap来定位项目。否则，为了更简单的解决方案，您可以使用CSS Grid布局。 - Michael Benjamin

@Michael_B 我不能使用固定高度容器，因为它可以包含未知数量的子元素，但我很想看看CSS Grid解决方案如何工作。 - Bobe

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>

- Yevgeny

---

我本来希望避免使用浮点数，但看起来这可能是目前唯一的选择。 - Bobe

你可以尝试在现代浏览器中使用CSS Grid，而在旧浏览器中则使用floats。 - Yevgeny

Answer 2

你知道我做错了什么吗？或者有更好的方法来解决这个问题（不使用JavaScript）？

问题在于flexbox并不适用于创建复杂的网格。一旦你要求像砖石式布局这样的东西（这就是你想要的），你就需要使用hack和workaround来完成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实现砌体布局，但元素按水平顺序排序

- Michael Benjamin