如何使Flexbox跨越多行？

StackOverflow https://stackoverflow.com//questions/25051008

  •  21-12-2019
  •  | 
  •  

题

我想使用CSS 柔性箱 属性来制作某种网格，其中元素可以跨越多行。

下面是基本的HTML源代码:

<section class="group">
    <h1>...</h1>
    <section class="item">...</section>
    <section class="item">...</section>
    <section class="item">...</section>
    <section class="item">...</section>
    <section class="item">...</section>
    <section class="item">...</section>
</section>

以下是我想要实现的目标:

enter image description here

内的 section.group, ，我要 h1 每个100%宽 section.item 宽50%，排列成 n ×2网格，其中 n 取决于内部的数量 sections, ，这可能会改变。

我无法更改HTML，这意味着我无法包装 section.items与unsemantic divs.我只能使用CSS。这是我目前所拥有的:

.group {
   display: flex;
}
.group h1 {}
.group .item {}

（没有太多的开始）

我怎样才能使用 Flexbox模块 要做到这一点？

有帮助吗？

解决方案

首先，确保 flex-direction 被设置为 row 或 row-reverse, ，因为我们要水平布局项目（从左到右或从右到左）。但真的, flex-direction: row; 是默认的，所以我们不需要它。这里是初学者的地方。

然后，为了确保盒子跨越多个轨道，添加 flex-wrap: wrap;.

.group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

现在我们必须调整项目的大小。TLDR:

.group h1    { flex: 100%; } /* flex: 1 1 100%; */
.group .item { flex:  50%; } /* flex: 1 1  50%; */

如果你想知道为什么，请继续阅读。否则，就是这样！

默认情况下， 主要尺寸 （在这种情况下，水平尺寸或宽度）的每个flex项目服从其指定的值 width 财产。乍一看，我们可能只想声明宽度:

/* NOPE!
.group h1    { width: 100%; }
.group .item { width:  50%; }
*/

然而，这不是很好的未来证明，因为我们可能希望稍后改变flex-direction，如果我们在垂直写作模式下写作，或者即使我们只是想交换布局。如果 flex-direction 是 column 或 column-reverse, ，然后设置宽度不会得到我们想要的东西。我们真的在考虑尺寸。 主尺寸, ，这是什么 flex 是为了。

（这是一个非常基本的用法 flex, ，但其实多了很多......咳咳… 灵活 ….阅读更多有关 flex 速记财产 在MDN上。)

还有更多关于flexbox的信息 CSS3规格 而在 MDN指南.

其他提示

我的第一个答案是关于使用Flexbox来实现布局。

在这个答案中，我谈论网格。

要想直截了当地说,在这种情况下应该使用CSS网格.Flexbox适用于一维布局，或者在包装行（或列）时，包装可以在我们无法控制的任何点任意发生。

当我们想要完全控制两行时 和 列。CSS网格是我们的解决方案.CSS网格也容易得多，因为我们只需要设置网格容器的样式，而不是它的任何子项。当然也有例外，比如我们的标题。

.group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.group h1 {
  grid-column: 1 / -1;
}

让我们把它分解一下。

display: grid;

这是不言自明的。它设置网格容器。

grid-template-columns: repeat(2, 1fr);

我们需要2列， 1fr 每个，其中一个 fr 单位为"剩余空间"。换句话说，两列共享相等数量的剩余空间。有很多方法可以写这个。

  • grid-template-columns: repeat(2, 1fr); 是我们用过的，但我们本可以写的
  • grid-template-columns: repeat(2, 50%);, ，或
  • grid-template-columns: 1fr 1fr;, ，甚至
  • grid-template-columns: 50% 50%;

这取决于您喜欢更改代码的频率。稍后，如果我们想要一个3列的布局，它可以是

  • grid-template-columns: repeat(3, 1fr);,
  • grid-template-columns: repeat(3, 33.33%);, ，或
  • grid-template-columns: 1fr 1fr 1fr, ，或
  • grid-template-columns: 33.33% 33.33% 33.33%.

或者假设我们仍然想要2列，但我们希望左边是右边的一半-一比二的比例:

  • grid-template-columns: 1fr 2fr
  • grid-template-columns: 33.33% 66.67%

该 grid-template-columns 和 grid-template-rows 是非常复杂的属性，我仍然不完全理解。甚至不要让我开始自动调整大小，灵活的面包和大小范围。

让它说，虽然 grid-template-columns: repeat(2, auto); 也是一个有效的风格，这不是我们想要的，因为 auto 根据内容调整列的大小，我们不能保证每个列的宽度为50%。

grid-column: 1 / -1;

这个看起来很奇怪，但很容易学习。 grid-column 是简写 grid-column-start / grid-column-end, ，其中整数为定义列的行编号。您也可以使用名称，但对于像我们这样简单的布局来说，这将是矫枉过正的。

  1. 第一行，在网格的开始，是 1 （不是零）。
  2. 在我们的网格中, 2 是列之间的线，和
  3. 3 在最后。

一般来说，负数从最后开始向后计数。所以在我们的2列网格中, -1 是一样的 3, ，但在3列布局中, -1 将等同于 4.

我们希望我们的标题是全宽的，无论我们有多少列，所以它从 1 结束于 -1.

（注:请注意，您的预处理器可能会将斜杠解释为除法符号，编译为 grid-column: -1;.不酷。所以至少在更少的情况下，我会转义一个字符串字面量。我不能代表Sass说话。)

grid-column: ~'1 / -1'; // compiles to `grid-column: 1 / -1;`
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top