flexbox 网格中额外容器的替代方案

Question

我有两个 .flex-container 和 3 个 .box children，我想进行不同的设置。查看我的代码片段以获得视觉效果和我的解决方案。

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

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

我的问题是我需要这个额外的容器.box-container吗？如果答案是肯定的，那就这样吧。我觉得我缺少一些基本的东西，但我认为它可能需要它，因为这些布局不是 height-based 并且我猜它是垂直方向的？我尝试以不同的方式使用 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

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

Answer 2

灵活布局

您不能使弹性项目换行在同一行中的其他项目之下。这不是 flexbox 的工作方式，它是沿着水平线和垂直线的。因此，要在同一个 "row" 中将两个项目并排堆叠，您需要一些 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 现在大多数主流浏览器都支持，并且因为您的布局 objective 使用这项新技术很简单，而且因为使用网格布局 你永远不需要将项目包装在嵌套容器中或在主容器上设置固定高度，我在下面发布了一个答案：

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>

备注：

建立块级网格容器。 (spec reference)
指示网格创建两个等宽的列。 1fr代表免费space的比例。它类似于 flex-grow: 1。 (spec reference)
指示第一项跨越两行（即从网格行第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

flexbox 网格中额外容器的替代方案

Alternatives for extra containers in a flexbox grid

html

css

flexbox

css-grid

灵活布局

网格布局