CSS Grid 和 Flexbox

朱雀 2023-09-28 08:40 109阅读 0赞

CSS Grid 和 Flexbox 近来在 Web 开发世界中越来越受欢迎，因为它们易于使用和可定制。Grid 和 Flexbox 这两种布局选项都允许用户排列其网站的内容，而无需使用 CSS 或 JavaScript。

然而，问题迫在眉睫：你什么时候会在 Flexbox 上使用 CSS Grid 模块，反之亦然？这是我们试图回答的问题，同时告诉您更多关于他们独特优势的信息！

Flexbox 和 Grid 最大的区别在于维度。Flexbox 是一种一维布局系统，可以将内容保存在行或列中，并且内容会根据其所在的区域/部分进行收缩或拉伸。

另一方面，Grid 是一个二维的布局系统，内容可以按行和列显示，但它的结构更加僵化。为了更深入地了解差异和相似之处，让我们看一些具有相应 HTML 和 CSS 的示例。

### **示例 1：Flexbox 与 Grid** ###

在这个例子中，我们使用 Flexbox 和 Grid 布局排列了五个元素，分别命名为 First、Second、Third、Fourth 和 Fifth。首先，我们有 Flexbox，在“wrapper.css”文件中，我们使用“display: flex”和“flex: 1 1 150px”来分配 Flex 属性，将容器的大小设置为 150px。

属性“flex-wrap: wrap”允许元素在当前行已满时换行到下一行（再次记住，Flexbox 是一维布局系统）。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                .wrapper {
                    width:500px;
                    display: flex;
                    flex-wrap:wrap;
                }
                .wrapper > div {
    
                    flex:1 1 150px;
                }
                div{
                    border:1px solid;
                }
    
            </style> </head>
        <body>
            <div class="wrapper">
                <div>First</div>
                <div>Second</div>
                <div>Third</div>
                <div>Fourth</div>
                <div>Fifth</div>
            </div>
        </body>
    </html>

我们生成的布局应如下所示：

![da224d285b05e74ab179b539e80a5d20.png][]

可以看出，First、Second 和 Third 填充了尽可能多的空间，给定代码中的约束，Fourth 和 Fifth 包裹到下一行。由于“flex-wrap”属性，它们还填满了整行。

> 但是相反，如果我们希望第四和第五排列在第一和第二下面呢？这就是二维布局系统 Grid 的用武之地。

网格以与创建表格相同的方式排列容器，具有相同的大小和结构。下面，在相应的 HTML 和 CSS 中，“display:grid”定义了 Grid 布局，“grid-template-columns:repeat(3, 1fr)”属性将三个容器放在一行中，然后转到下一行。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                .wrapper {
                    width:500px;
                    display: grid;
                    grid-template-columns:repeat(3,1fr);
                }
    
                div{
                    border:1px solid;
                }
    
            </style> </head>
        <body>
            <div class="wrapper">
                <div>First</div>
                <div>Second</div>
                <div>Third</div>
                <div>Fourth</div>
                <div>Fifth</div>
            </div>
        </body>
    </html>

我们生成的布局现在看起来像：

![3b5c25baafe14b0688f75ae5b2e4cc8f.png][]

正如所承诺的那样，Grid 模仿了一个类似表格的结构，并将前三个项目放在一行中，然后以类似表格的方式移动到下一个项目。Grid 允许我们以更结构化的方式更好地对齐元素，如上所示，但它比 Flexbox 更严格，因为 Flexbox 会尝试填充上面可以看到的末尾的空白空间。

### **示例 2：Flexbox 与 Grid** ###

另一个突出显示 Grid 和 Flexbox 之间差异的容器排列示例如下所示，其中容器中包含不同大小的文本。

在 Flexbox 的第一个示例中，添加了额外的边距，因为 flex 容器没有默认边距（使用“margin: 0.5rem”），以及使用“padding: 3rem”的容器之间的额外填充。

![336fbb4768bd4975aaca8bb19604e8ca.png][]

![c12cb93ab8434407b80dbb0bb09a249a.png][]

生成的布局在更宽的显示器上看起来像这样：

![6bfb6cf51bb548c7949392261c4796fa.png][]

像这样在更窄的显示器上：

![3c6bf889cca2480cb1a6bd38729a7529.png][]

同样，如前所述，我们可以看到 Flexbox 的灵活性和一维性。

首先，Flexbox 尝试在一行中填充尽可能多的信息，然后换行到下一行。其次，内容较长的容器与其他五个容器的大小不一样。

Flexbox 容器的大小取决于它们所包含的内容而不是它们的结构（Grid 就是这种情况），从而在显示内容时提供了更好的灵活性。

Grid 将如何显示这个？这是代码：

![9d0427b8e53a481ea8b0dd46609c9f8e.png][]

![c180391d264140cd8c7059f4b76a5971.png][]

以及在更宽的屏幕上生成的布局：

![e4454b5edc374b838643561f7a7bf19b.png][]

还有更窄的屏幕：

![5a9b9ac0fbbc407289749039a8a44a1e.png][]

如前例 1 中所见，Grid 的布局模仿了每个容器大小相同的表格。

在上面的示例中，使用了一些属性，例如“grid-auto-columns: minmax(15rem, auto)”和“grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))”网格布局更加动态，可以在更宽的屏幕中看到，box 5 更短，但我们仍然无法实现与 Flexbox 相同的灵活性，尽管我们确实获得了良好的刚性结构。

### **发挥它** ###

在探索和使用 Flexbox 和 Grid 布局的过程中，有一些重要的元素和属性需要牢记在心。

对于 Flexbox，在上面的示例中，容器按行排列，因为默认情况下，属性“flex-direction”设置为“行”并且从右到左。这可以通过添加“flex-direction: column”轻松更改。

另一个要记住的重要属性是“flex-wrap”，默认设置为“nowrap”，项目将在屏幕上单独排列。

如上例所示，将其设置为“wrap”，让项目尽可能地排列在一行中，然后换行到下一行，类似地，将其设置为“wrap-reverse”将换行到多行从底部到顶部。

鉴于上面的例子，另一个需要强调的重要属性是“justify-content”。

默认情况下设置为“flex-start”，其中项目被推送到行首并且有一些额外的空间，类似于 Grid，但将其设置为“justify-content: space-evenly”会填充空白空间并相应地安排容器。

这些只是无数重要属性中的一小部分，它们有助于很好地开始使用 Flexbox 并了解它的用途。

> 同样，Grid 也有自己的一套重要属性需要了解和开始。

对于任何项目，“grid-area: X, Y, span 1, span 2”属性都非常重要，因为它指定在 X 行 Y 列开始一个项目，并跨越 1 行和 2 列。

“grid-auto-columns”和“grid-auto-rows”属性设置网格中列和行的默认大小，而与“grid-area”类似，属性“grid-column: 1, span 2” ” 和 “grid-row: 1, span 2” 可用于使项目从第 1 列/第 1 行开始，并分别跨越 2 列/行。

此外，可以使用定义行和列间隙的“gap: Xpx Ypx”在整个网格结构中设置间隙。复制上面的代码并尝试这些，看看它们会如何影响上面的布局！

### **结论：哪一个最好？** ###

那么，网格还是 Flexbox？如上图，没有明确的赢家；两者都有自己的优点和缺点，并提供独特的优势。Flexbox 提供了显示内容的灵活性，在某些情况下可能很有用，而 Grid 提供了良好而严格的结构，它本身在其他情况下也很有用。

如果您想开发一个内容更动态的网站，而内容的定位并不那么重要，那么 Flexbox 可能是您的选择。否则，如果您想显示一个更严格的、类似表格的内容结构，那么 Grid 将是您的最佳选择。

归根结底，Flexbox 和 Grid 都可以自定义附加属性，因此您可以使用 Flexbox 获得更刚性的结构，或者使用 Grid 获得更灵活、动态的结构。

把它们想象成勺子和叉子，它们都有自己独特的用例，但您可以用一个代替另一个。这突出了 CSS 本身的美丽，为我们提供了许多令人难以置信的选项来以多种不同的方式设置和自定义我们的内容和布局。你更喜欢使用 Grid 还是 Flexbox，还是两者都用？让我们知道！

[da224d285b05e74ab179b539e80a5d20.png]: https://img-blog.csdnimg.cn/img_convert/da224d285b05e74ab179b539e80a5d20.png
[3b5c25baafe14b0688f75ae5b2e4cc8f.png]: https://img-blog.csdnimg.cn/3b5c25baafe14b0688f75ae5b2e4cc8f.png
[336fbb4768bd4975aaca8bb19604e8ca.png]: https://img-blog.csdnimg.cn/336fbb4768bd4975aaca8bb19604e8ca.png
[c12cb93ab8434407b80dbb0bb09a249a.png]: https://img-blog.csdnimg.cn/c12cb93ab8434407b80dbb0bb09a249a.png
[6bfb6cf51bb548c7949392261c4796fa.png]: https://img-blog.csdnimg.cn/6bfb6cf51bb548c7949392261c4796fa.png
[3c6bf889cca2480cb1a6bd38729a7529.png]: https://img-blog.csdnimg.cn/3c6bf889cca2480cb1a6bd38729a7529.png
[9d0427b8e53a481ea8b0dd46609c9f8e.png]: https://img-blog.csdnimg.cn/9d0427b8e53a481ea8b0dd46609c9f8e.png
[c180391d264140cd8c7059f4b76a5971.png]: https://img-blog.csdnimg.cn/c180391d264140cd8c7059f4b76a5971.png
[e4454b5edc374b838643561f7a7bf19b.png]: https://img-blog.csdnimg.cn/e4454b5edc374b838643561f7a7bf19b.png
[5a9b9ac0fbbc407289749039a8a44a1e.png]: https://img-blog.csdnimg.cn/5a9b9ac0fbbc407289749039a8a44a1e.png