如何结合 Flexbox 和 CSS 网格进行高效布局

已发表: 2023-02-12

编者注：这篇客座文章是由 Abbey Fitzgerald 撰写的，他是一位用户体验软件工程师和网页设计师，他热爱编写代码的艺术。

过去，CSS 浮动属性是在网站上排列元素的主要方法之一。如果您曾经以这种方式工作过，您就会知道它并不总是适合复杂的布局。幸运的是，在现代网页设计时代，由于 Flexbox 和 CSS 网格，对齐元素变得更加精简。

当 Flexbox 出现时，它使对齐变得更加容易，并被广泛采用。 CSS Grid Layouts 也在网页设计社区中引起了很大的轰动。前一段时间，我们了解了如何创建基本的 CSS 网格布局。虽然它没有被广泛采用，但浏览器开始支持它。当它得到全面支持时，这将对设计产生很大影响。浏览器支持一直在增加；请务必查看我可以使用以获取最新信息。

现在您可能想知道接下来会发生什么；毕竟，Flexbox 和 CSS Grid Layouts 似乎实现了相似的结果。然而，这不是 Flexbox 与 Grid 的争论，而是更多地学习如何一起使用它们。我对 Grid 和 Flexbox 的使用越多，我发现您不必只选择其中之一。在不久的将来，当 CSS Grid Layouts 拥有完整的浏览器支持时，设计师将能够综合利用各自的优势，创造出最高效、最有趣的设计。

测试基本的 Flexbox 和 CSS 网格布局

为了确定 Flexbox 或 CSS Grid 是否更适合您的开发工作流程，创建一个仅使用其中一个的标准布局是了解它们如何工作以及两者是否具有优势的好方法。我们将从一个非常简单且非常熟悉的布局类型开始，其中包含页眉、侧边栏、主要内容和页脚。像这样的简单布局是定位各种元素的快速方法。

请记住，您永远不应该在您的实际网站上进行更改。请尝试使用 Local，这是一款免费的本地 WordPress 开发应用程序。立即下载！

如何使用 Flexbox 创建布局

最近，我介绍了创建 Flexbox 卡片布局的主题。该帖子详细介绍了 Flexbox 如何工作以及特定的 CSS 信息，因此如果您是 Flexbox 的初学者，它将帮助您熟悉它的工作原理。

对于本教程，我们将构建以下内容：

在 Codepen 上看到这个。

对于这个基本布局，Flexbox 的主要任务包括：

创建全宽页眉和页脚
在主要内容区域旁边放置侧边栏
侧边栏和主要内容区域的正确大小
导航元素定位

基本的 HTML 结构

<div 类="容器">
        
    <标题>
        <导航>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </导航>
        <按钮></按钮>
    </标题>
    <div 类="包装器">
        <aside class="侧边栏">
            <h3></h3>
        </aside>
        <section class="主要">
            <h2></h2>
            <p></p>
        </节>
    </div><!-- /wrapper -->
    <页脚>
        <h3></h3>
        <p></p>
    </页脚>
</div><! -- /容器 -->

如何使用柔性显示器

标题样式

从外到内，添加display: flex; 到容器是任何 Flexbox 布局的第一步。 flex-direction 设置为 column，因此这会将所有部分放置在彼此之下。

 。容器 {
    显示：弹性；
    弹性方向：列；
}

使用display: flex; （标头默认是块级元素）。由于此声明，它将允许轻松放置导航元素。

左侧导航中有一个徽标和两个菜单项，右侧有一个登录按钮。导航在标题中，因此通过justify-content: space-between; 导航和按钮将自动间隔。

一件方便的事情是对齐文本是多么容易。在导航中，使用align-items: baseline; ，所有导航项都与文本的基线对齐，因此它们看起来更统一。

 标题{
    填充：15px；
    底部边距：40px；
    显示：弹性；
    证明内容：空格之间；
}
标题导航 ul {
    显示：弹性；
    对齐项目：基线；
    列表样式类型：无；
}

页面内容样式

接下来，是侧边栏和主要内容区域，以及包含两者的包装器。 class为.wrapper的div也需要display: flex; 但 flex-direction 与上面不同。因为侧边栏和内容区域彼此相邻而不是堆叠在一起，所以 flex-direction 是

接下来，是侧边栏和主要内容区域，以及包含两者的包装器。 class为.wrapper的div也需要display: flex; 但 flex-direction 与上面不同。因为侧边栏和内容区域是相邻的而不是堆叠在一起，所以 flex-direction 是行，这与上面容器中所做的相反。

 .wrapper {
    显示：弹性；
    弹性方向：行；
}

主要部分和侧边栏的大小非常重要，因为这里有更多突出的信息。主要内容应该是侧边栏大小的三倍，使用 Flexbox 很容易做到这一点。

 。主要的 {
    弹性：3；
    右边距：60px；
}
侧边栏{
   弹性：1；
}

对于此代码片段，我使用了速记。 flex 值用于 flex-grow 属性。 Flex-grow 非常强大，因为这是项目相对于同一容器内其他灵活项目的增长量。

总的来说，Flexbox 在创建这种简单布局方面非常高效。控制列表项的样式以及导航和按钮之间的间距特别有用。

如何使用 CSS 网格布局创建布局

为了测试效率，下一步是使用 CSS Grid 构建相同的基本布局。页面元素完全相同，并且将以与 Flexbox 示例相同的方式定位。

在 Codepen 上看到这个。

网格模板区域

CSS Grid 的一个方便之处是能够指定模板区域，这可以使定义布局非常直观。通过采用这种方法，网格上的区域可以被命名和引用以定位项目。对于这个基本布局，我们需要命名四个项目：

标头
主要内容
边栏
页脚

基本的 HTML 结构

<div 类="容器">
        
    <标题>
        <导航>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </导航>
        <按钮></按钮>
    </标题>
  
    <aside class="侧边栏">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </aside>
    <section class="主要">
        <h2></h2>
        <p></p>
         <p> </p>
  </节>
    <页脚>
        <h3></h3>
        <p></p>
    </页脚>
</div>

我们将按顺序在我们的网格容器上定义这些区域，有点像把它们画出来。为了便于阅读，我也会将它们隔开。

 网格模板区域：
        “标题标题”
        “侧边栏主要”
        “页脚页脚”；

请注意侧边栏是如何列在 main 之前的？切换它们也会使页面上的顺序发生变化。目前，侧边栏在左侧，主要内容在右侧，但您可以根据需要轻松更改它。

需要注意的一件事：这些名称需要“连接”到样式。仅仅因为已经声明了 grid-template-areas，我们不知道标头实际属于哪里。在页眉块中， grid-area: header; 需要添加。

 标题{
    网格区域：标题；
    填充：20px 0；
    显示：网格；
    网格模板列：1fr 1fr；
}

HTML 结构与 Flexbox 示例中的相同，但创建网格布局的 CSS 有很大不同。

 。容器{
    最大宽度：900px；
    背景色：#fff；
    保证金：0自动；
    填充：0 60px；
    显示：网格；
    网格模板列：1fr 3fr；
    网格模板区域：
        “标题标题”
        “侧边栏主要”
        “页脚页脚”；
    网格间隙：50px；
}

要开始使用 CSS 网格布局，拥有display: grid;是非常重要的。装在容器上。 grid-template-columns 在此处声明以提供页面的整体结构。还记得 Flexbox 示例是如何将.main类设置为 3 的 flex-grow 并且将侧边栏的 flex-grow 设置为 1 来确定大小的吗？这里 grid-template-columns 被设置为 1fr 和 3fr。这是用小数单位形成网格的地方。使用这些值，很明显有两列并且它们的宽度不相等。设置为 3fr 的列比其他列宽三倍。这解释了侧边栏如何显得比内容区域更窄。

接下来，需要针对表头调整用于容器的 fr 单位。网格模板列已调整为 1fr 和 1fr。这样就有两个大小相同的列，导航项和按钮将适合。

 标题{
    网格区域：标题；
    显示：网格；
    网格模板列：1fr 1fr；
}

Flywheel gird 和 flexbox layouts 布局 grid header screenshot

要放置按钮，我们只需要使用 justify-self 并将其设置为结束即可。

 标题按钮{
    自我辩护：结束；
}

导航放置在需要的地方：

 标题导航{
    自我辩护：开始；
}

全角页脚不需要设置不同的列，因为内容位于中间。

如何使用 Flexbox 和 CSS 网格创建布局

现在我们已经了解了每个方法可以单独做什么，是时候通过组合 Flexbox 和 CSS 网格布局来创建更复杂的东西了。

在 Codepen 上看到这个。

这是让网格运行的基本大纲：

在 Codepen 上看到这个。

请注意设计如何同时依赖于列和行？这种布局需要东西在两个方向上排列一致并且表现一致，因此使用 CSS Grid 对整体布局来说是有效的。

规划是这样布局的关键。最好先勾勒出它的草图，然后从字面上看事情是如何叠加的。开始代码，显示：网格；是必不可少的; 没有它，使用这种类型的布局将不起作用。这里要注意的一件事是内容块之间有间距。这是通过 grid-column-gap 和 grid-row-gap 实现的。

 。容器 {
  显示：网格；
  网格模板列：0.4fr 0.3fr 0.3fr；
  网格列间隙：10px；
  网格行间距：15px；
}

此布局返回分数单位，现在需要三个区域。第一个值 0.4fr 比第二个和第三个值略宽，它们都是 0.3fr。

列和行布局

这是从一开始就参考图表的重要之处。从顶部开始，这是页眉的放置方式。它跨越所有列和一行。

 .header {
  网格列开始：1；
  网格列端：4；
  网格行开始：1；
  网格行尾：2；
  背景色：#d5c9e2；
}

如果要使用速记，则起始值和结束值在同一行并用斜线分隔。它看起来像这样：

 .header {
  网格列：1 / 4；
  网格行：1 / 2；
  背景色：#55d4eb；
}

要放置所有其他项目，只需将适当的网格和列值添加到 CSS。这个例子在 Codepen 上，而不是在这里一一介绍。

网格布局构建完成后，下一步就是对内容进行微调。

导航

Flexbox 非常适合放置标题元素。基本布局示例通过 justify-content: space-between 触及了这一点。网格示例需要有 justify-self: start; 在导航和自我证明上：结束；用于放置东西的按钮，但 Flexbox 使导航更容易间距。

 .header {
  网格列：1 / 4；
  网格行：1 / 2；
  颜色：#9f9c9c；
  文本转换：大写；
  border-bottom: 2px solid #b0e0ea;
  填充：20px 0；
  显示：弹性；
  证明内容：空格之间；
  对齐项目：居中；
}

这里将遵循相同的格式。徽标、菜单项和按钮使用 Flexbox 的 justify-content 进行间距。

列内容网格

对于需要元素沿一个方向排列的场合，这意味着它更“一维”，通常 Flexbox 是更好的选择。此外，Flexbox 擅长动态缩放元素。也许您已经通过添加display:flex; 在父元素上，在子元素上有 flex 属性。使用该技术，形成了一条漂亮的线，这是确保所有元素高度相同的有效方法。

带有文本和按钮的行内容

在“额外内容”部分，添加了三个带有文本和按钮的区域。 Flexbox 可以很容易地保持三列的设置宽度。

 。额外的 {
  网格列：2 / 4；
  网格行：4 / 5；
  填充：1rem；
  显示：弹性；
  弹性包装：包装；
  边框：1px 实心#ececec；
  证明内容：空格之间；
}

一个 Flexbox 异常

是的，我确实说过 Flexbox 更适合一维布局、网格或列，但是如果您阅读了如何使用 Flexbox 创建现代 CSS 卡设计布局帖子，则演示了“最后一行”Flexbox 技巧以保持行和列的平衡，即使卡片数量不是偶数。

 .related-images {
  网格列：1 / 3；
  网格行：5 / 6；
  显示：网格；
  网格模板列：重复（4,1fr）；
  网格间隙：1rem；
}
.related-images .icon {
    背景色：白色；
    弹性：1 1 150 像素；
}

设计方法总结

基本上，我在这里采用的方法是将 CSS 网格布局用于整体布局（以及任何非线性设计）。在网格内容区域内，Flexbox 用于对网格区域内的样式进行排序和微调。

资源

关于 Flexbox 和 CSS Grid 布局的资源太多了，不胜枚举。这里有一些可以让您朝着正确的方向开始并激发您的布局。

框对齐备忘单
Jen Simmons 的布局实验室
网格完整指南
Flexbox 完整指南

希望这些练习能让您更好地了解如何使用 CSS 网格布局和 Flexbox 构建布局。您如何看待这些新技术？他们如何帮助您的开发过程？