题
我想使用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>
以下是我想要实现的目标:
内的 section.group
, ,我要 h1
每个100%宽 section.item
宽50%,排列成 n ×2网格,其中 n 取决于内部的数量 sections
, ,这可能会改变。
我无法更改HTML,这意味着我无法包装 section.item
s与unsemantic div
s.我只能使用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来实现布局。
在这个答案中,我谈论网格。
要想直截了当地说,在这种情况下应该使用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
(不是零)。 - 在我们的网格中,
2
是列之间的线,和 3
在最后。
一般来说,负数从最后开始向后计数。所以在我们的2列网格中, -1
是一样的 3
, ,但在3列布局中, -1
将等同于 4
.
我们希望我们的标题是全宽的,无论我们有多少列,所以它从 1
结束于 -1
.
(注:请注意,您的预处理器可能会将斜杠解释为除法符号,编译为 grid-column: -1;
.不酷。所以至少在更少的情况下,我会转义一个字符串字面量。我不能代表Sass说话。)
grid-column: ~'1 / -1'; // compiles to `grid-column: 1 / -1;`