1

我有两个.flex-container和三个.box孩子，我想以不同的方式设置。请参阅我的片段以获得视觉效果和我的解决方案。

第一个很容易，因为我可以将第一个框设置为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>

4

2 回答 2

1

弹性布局

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

您可以：

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

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

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

网格布局

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

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. 建立块级网格容器。（规格参考）
  2. 指示网格创建两个等宽的列。1fr代表自由空间的比例。它类似于flex-grow: 1。（规格参考）
  3. 指示第一项跨越两行（即从网格行线 1 到网格行线 3，覆盖两个网格轨道）。（规格参考）

浏览器对 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

于 2017-04-24T20:07:16.707 回答
0

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

于 2017-04-24T20:04:29.513 回答