弹性盒网格中额外容器的替代方案

Question

我有两个 .flex-container 和 3 个 .box 孩子，我想以不同方式设置它们。查看我的 sn-p 以获得视觉效果和我的解决方案。

第一个很简单，因为我可以将第一个框设置为width: 100%;，然后使用flex-wrap: wrap;。很高兴。

对于第二个.flex-container，我发现我必须在最后两个框周围添加一个额外的容器.box-container，然后给它flex: auto; 以获得所需的效果。

我的问题是我需要这个额外的容器.box-container 吗？如果答案是肯定的，那就这样吧。我觉得我缺少一些基本的东西，但我认为它可能需要它，因为这些布局不是基于高度的，我猜它是垂直方向的？我尝试以不同的方式使用flex-direction: column;。

任何使用 flexbox 且没有额外容器的解决方案，例如我展示的第一个布局，将不胜感激。谢谢你。

* {
  box-sizing: border-box;
}

section {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.flex-container-1 {
  flex-wrap: wrap;
  border: 3px solid seagreen;
  background-color: mediumseagreen;
}

.flex-container-1 .box:first-of-type {
  width: 100%;
}

.flex-container-2 {
  border: 3px solid firebrick;
  background-color: indianred;
}

.box-container {
  flex: auto;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: auto;
  padding: 10px;
  border: 1px solid #fff;
}

.box .box-num {
  font-size: 40px;
  color: #fff;
}

<section class="flex-container-1">
  <div class="box">
    <span class="box-num">1</span>
  </div>
  <div class="box">
    <span class="box-num">2</span>
  </div>
  <div class="box">
    <span class="box-num">3</span>
  </div>
</section>

<section class="flex-container-2">
  <div class="box">
    <span class="box-num">1</span>
  </div>
  <div class="box-container">
    <div class="box">
      <span class="box-num">2</span>
    </div>
    <div class="box">
      <span class="box-num">3</span>
    </div>
  </div>
</section>

Answer 1

弹性布局

您不能让弹性项目包裹在同一行的其他项目之下。这不是 flexbox 的工作方式，它是沿着水平线和垂直线的。因此，要将两个项目堆叠在同一“行”中的一个旁边，您需要一些 CSS 或 HTML 技巧。

您可以：

• 定义容器的高度。这将使您能够使用flex-flow: column wrap 将项目 2 和 3 堆叠在项目 1 旁边作为两个等高的列，否则...

• 使用嵌套容器。这将允许您将项目 2 和 3 包装在一个项目中，该项目可以成为项目 1 的兄弟，并且两列可以具有相同的高度。

我在此处的回答中进一步解释了这些概念及其局限性：

• Is it possible for flex items to align tightly to the items above them?

---

网格布局

因为CSS Grid Layout 现在得到大多数主流浏览器的支持，并且因为使用这项新技术您的布局目标很简单，并且因为使用网格布局您永远不需要将项目包装在嵌套容器中或在主容器上设置一个固定的高度，我已经在下面发布了一个答案：

article {
  display: grid;                            /* 1 */
  grid-template-columns: repeat(2, 1fr);    /* 2 */
}

section:nth-child(1) {
  grid-row: 1 / 3;                          /* 3 */
}

/* non-essential decorative styles */

article {
  padding: 10px;
  border-radius: 5px;
  border: 3px solid firebrick;
  background-color: indianred;
}
section {
  padding: 10px;
  border: 1px solid #fff;
  font-size: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
* {
  box-sizing: border-box;
}

<article>
    <section>1</section>
    <section>2</section>
    <section>3</section>
</article>

注意事项：

1. 建立块级网格容器。 (spec reference)
2. 指示网格创建两个等宽的列。 1fr 表示可用空间的比例。它类似于flex-grow: 1。 (spec reference)
3. 指示第一项跨越两行（即，从网格行线 1 到网格行线 3，覆盖两个网格轨道）。 (spec reference)

浏览器支持 CSS 网格

• Chrome - 自 2017 年 3 月 8 日起提供全面支持（版本 57）
• Firefox - 自 2017 年 3 月 6 日起提供全面支持（版本 52）
• Safari - 自 2017 年 3 月 26 日起全面支持（版本 10.1）
• Edge - 自 2017 年 10 月 16 日起提供全面支持（版本 16）
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片：http://caniuse.com/#search=grid

Answer 2

是的。除非我在容器上使用固定高度。