我想使用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 被设置为 rowrow-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-directioncolumncolumn-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-columnsgrid-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