无论是在开发个人页面还是商业网站中，网页布局始终是前端开发者所关注的焦点。为了能够快速构建页面布局，前端开发者可以借助现代 CSS 布局技术。目前，Flexbox 和 Grid 布局是最为热门的两种技术。在本文中，我们将深度分析这两种技术的优缺点，为你提供学习和指导意义。
Flexbox 布局
Flexbox 布局是一个一维的布局模型，通过分布在容器中的弹性项目，让内容的排列、对齐和分布变得简单。在我们日常的前端项目中应用非常广泛，如移动端菜单、中等复杂的布局均可用 Flexbox 进行构建。
优点
容器与项目间的自适应
使用 Flexbox 布局可以轻松调整不同屏幕大小下的元素位置和大小。由于容器具有在任意尺寸下自适应的能力，因此项目的大小和位置会相应地调整。
适应性强
Flexbox 可以用于响应式布局，从而使你的内容能够适应任何设备。有了适应性强的布局，您不必再为每个设备制定一组布局规则。
工作流程简单
使用 Flexbox 布局可以最大限度地减少 CSS 的编写量，因为你不必为每个方向输入位置值，也不必使用 float 和 clear 解决布局问题。
缺点
一维布局模型
Flexbox 只能处理一维布局，即所有元素都是基于一条水平或垂直线对齐的。因此，对于二维或多维布局，我们需要使用 Grid 布局。
兼容性
尽管大多数现代浏览器都已经支持了 Flexbox 布局，但在一些旧版本的浏览器上可能会出现兼容性问题。因此，在开发中，我们需要注意浏览器兼容性。
示例代码
以下是使用 Flexbox 布局的示例代码：
-- -------------------- ---- ------- ----------- -------- ----- ---------------- ------- ------------ ------- ------- ------ - ------ ------ ------ ------- ------ ------- ----- ----------------- ----- -
Grid 布局
Grid 布局是二维的，将容器划分为行和列，通过对每个单元格进行控制以确定内容的位置。它是强大而灵活的布局工具。如果 Flexbox 只能处理一些基本情况， Grid 是对网格中的所有事情进行掌控。
优点
双向排布
与 Flexbox 不同，Grid 可以同时设置 row 和 column，使你能够更精确地控制你的布局方式。
精确度更高
使用 Grid 布局可以让我们更准确地控制我们的设计。我们可以通过确切的行数和列数控制任何元素。
工作流程简单
使用 Grid 布局可以最大限度地减少 CSS 的编写量，因为它可以让我们更准确地控制我们的设计。
缺点
兼容性
就像 Flexbox 一样， Grid 也有浏览器兼容性方面的问题。但在大多数情况下，我们可以借助自动填充和对齐来创造灵活的布局。
使用复杂度高
在理解了其工作原理后，Grid 布局的使用非常简单。但初次接触的时候，可能不容易理解它的一些概念，如：网格线，网格轨道等。
示例代码
以下是使用 Grid 布局的示例代码：
-- -------------------- ---- ------- ----------- -------- ----- --------- ----- ---------------------- ----------------- ------------- ------ -------------- ------- ------------ ------- - ------ ----------------- ----- -------- ----- -
总结
Flexbox 和 Grid 都是很强大的布局工具，所以我们需要在正确的时间使用正确的布局工具。在创建响应式布局时，使用 Flexbox；在创建更复杂的二维格子布局时，使用 Grid。如果你在前端布局中花费足够的时间，你将会发现它们两个都非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64586d10968c7c53b0aceea0