CSS Grid 和 Flexbox

allway2

已于 2022-05-30 18:11:21 修改

阅读量339

点赞数

文章标签： html css javascript

于 2022-05-30 17:54:32 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/125051053

版权

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>

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

可以看出，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>

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

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

示例 2：Flexbox 与 Grid

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

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

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

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

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

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

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

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

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

还有更窄的屏幕：

如前例 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”在整个网格结构中设置间隙。复制上面的代码并尝试这些，看看它们会如何影响上面的布局！