前言
随着 Web 应用的复杂性越来越高，前端布局技术的迭代也愈发快速。CSS Grid 和 CSS Flexbox 两者对于前端开发人员，可以说是必备技能。本文将深入探讨这两种布局方式的使用方法、原理、特点以及其优缺点。以及如何更好地搭配这两种技术来实现常见的布局效果。
CSS Grid
CSS Grid（网格布局）是最近几年来被广泛争论和使用的一种布局方式，它可以让开发者在布局时灵活分配栏、行和单元格。正如其名，CSS Grid 是一个二维的布局系统，在网格系统中，我们可以通过属性 grid-template-columns 和 grid-template-rows 来规定栏和行的数量、宽度以及高度。另外，grid-template-areas 属性也可以被应用来规定每一格应该放置哪些内容。
以下是一个简单的 CSS Grid 布局示例：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- ---- ---- -----
------------------- ---- -----
--------------------
-- - --
-- - ---
-
------ -
----------------- -----
------- --- ----- -----
-------- ----
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-HTML 代码：
<div class="container"> <div class="child a">A</div> <div class="child b">B</div> <div class="child c">C</div> <div class="child d">D</div> <div class="child e">E</div> <div class="child f">F</div> </div>
此布局的效果如下所示：
上述 CSS Grid 布局已经定义了一个 2 行 3 列的网格布局，由于每一个子元素都被映射到其所对应的区域中，我们不必对每个元素都指定位置、宽高等属性。通过使用网格布局，您可以轻松定义各种复杂的布局。
CSS Grid 特点
- 创建响应式页面布局的起点
- 对齐、分配和调整项目位置的可能性很大
- 可以直接规定网格中的位置，无论是使用行和列还是行和列模板
- 可以使用 grid-template-areas，将项目组织在命名的区域中，例如 header、main、aside、和 footer
- 立即创建复杂的网格结构，而无需使用 JavaScript 或其他辅助工具
CSS Grid 缺点
- 兼容性较差，需要 Vendor Prefix（浏览器私有前缀）
- 其他一些属性（如
grid-auto-flow）需要更多的 CSS 和配置 - 一旦您选择使用网格，您就不能使用 float 或者 margin：auto 的对齐方式
如何使用 CSS Grid
要使用 CSS Grid 来布置网格，请按以下步骤操作：
- 定义一个容器并使用
display: grid属性 - 通过定义模板来规定行和列的数量、宽度以及高度
- 确定项目的位置（您可以指定每个项目所处格子的列、行、列跨度和行跨度等属性）
- 编辑项目的位置和样式，以满足设计需求
CSS Flexbox
CSS Flexbox（弹性盒子布局）被广泛认为是现代 Web 开发中处理单维度布局的最佳方式之一。 Flexbox 可以使我们控制布局的主轴和交叉轴。 Flexbox 布局是基于容器内容的，即使用它来定义容器中元素的排列方式。
以下是一个简单的 Flexbox 布局示例：
-- -------------------- ---- ------- ---------- - -------- ----- ----------------- ----- -------- ----- - ---- - ---------- ----- ------------ ----- ------ ----- ------ ------ ------- ------ ------------ ------ ----------- ------- ------------- ----- - ---------------- - ----------------- -------- - ----------------- - ----------------- -------- - --------------- - ----------------- -------- -
HTML 代码：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
此布局的效果如下所示：
上述示例中，我们使用 display: flex 属性将容器定义为一个 Flexbox 容器。默认情况下，容器使用一行，并根据需要缩小项目以适应可用空间。换句话说，Flexbox 布局最适合用于水平或垂直单方向布局。
CSS Flexbox 特点
- 简化了响应式 Web 设计
- 通过带有 flex-grow，flex-shrink 和 flex-basis 的语法，可以平均分配容器中项目的大小，并使他们避免“换行”
- 可以通过实时更改 HTML 所在的容器元素的方向，实时旋转 Flexbox 容器周围的内容
- 使您可以轻松地从项目某些方向中排除某些项目
- 可在容器和项目上使用多个 CSS 属性，以控制对齐方式和布局
CSS Flexbox 缺点
- Flexbox 布局不是二维的
- 如果要支持旧版 IEL浏览器，可能需要使用 IE-specific 工具包
- 如果您打算在整个 Web 应用程序中使用 Flexbox 布局，那么您需要专门为每个容器进行一些研究。
如何使用 CSS Flexbox
要使用 CSS Flexbox 布局，请按以下步骤操作：
- 设置一个容器的
display属性为flex - 配置必要的 CSS 属性和概念（
flex-direction、justify-content和align-items），以确定项目在容器中的位置和分配方式 - 使用
flex-wrap、flex-flow和align-content，以进一步控制项目的位置和分配方式
如何在项目中选择一种合适的布局方式
当需要使用布局方式时，你需要明确你的需求和目标。如果您需要一个 1D 布局（根据一维即可实现需求）的布局，则为您的需求寻找 CSS Flexbox 布局（例如当您希望在物品沿着水平或垂直轴放置时）。
如果您想在 2D 空间中布置内容（例如，您需要使用布置子元素的 SharePoint 网格视图），则最好使用 CSS Grid 布局。这使您可以更好地控制元素的精细位置和整体布局。
当然，这并不是一份完整的指南。弹性盒布局和 Grid 布局的选项取决于您的需求。将您的项目中什么布局方式配合什么技术，取决于您的目标和时间表。始终确保您使用的布局方式满足您的需求，而不引入更多的问题。
结论
CSS Grid 和 Flexbox 的利弊有不同。每个布局方式都有其适用的场景。因此，将 Pixel-Perfect 根据设计规范推动至前端开发至关重要。在使用前一定要考虑好布局情况，为自己减少繁琐的工作。通常情况下，Flexbox 不仅更加简单易学，可以在大多数情况下充当一个很好的解决方案，而 Grid 适合处理更复杂的布局和可视化效果。 您可以使用这两种布局方式来构建您的下一个响应式、快速和高质量的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f23115a44b36ee576481f1