CSS flex 弹性盒子与 grid 网格布局区别及应用场景

弹性盒子又称为 `Flexbox`，然而我更喜欢 `flex` 的叫法。 `flex` 弹性盒子和 `grid` 网格布局作为前端开发中两把利器，它们的分界线没那么明显，虽然按照 MDN 的说法 flex 多用于一维布局(行/列)，grid 多用于二维布局(行列网格)，但实际开发中用多个一维布局也能拼凑出一个完整的二维布局。 grid 主要用来简化 html 结构，在一些二维布局的场景下，使用 flex 时需要更复杂的 html 结构支撑，而使用 grid 则可以尽可能的简化 html 结构。 我的理解 flex 擅长细节上的雕琢，而 grid 更擅长宏观上的调控。 ## flex 的应用场景 下面细说 flex 的应用场景，及同时使用 grid 会怎样实现。 ### 网页导航 随处可见的网页导航布局，看图：  **使用 flex 实现可以是这样的代码结构：** ```csharp ``` **使用 grid 实现的代码结构：** ```csharp ``` 可以看到，在处理一维布局时候，flex 可以说是得心应手，grid 则需要多写一些代码。 flex 的代码长得小清新一样，而 grid 总感觉有点长歪了~ ### 常见的左右布局 再看这种常见的栏目标题布局：  **使用 flex 实现：** ```csharp ``` **使用 grid 实现：** ```csharp ``` 对比下来，使用 grid 的代码还是多了一行 `grid-auto-flow: column;`，小清新的 flex 还是要苗条一点~ ### 常见的左左右布局 以百度首页的热搜导航为例：  **使用 flex 实现：** 以下示例代码巧用了 `margin-left: auto;` 让元素跑到右侧位置。 ```csharp ``` **使用 grid 实现：** ```csharp ``` 对比下来，还是 `flex` 布局更显得小清新一点。 ### 一维布局 flex 与 grid 对比 对比了几种常见的一维列布局，使用 flex 比使用 grid 代码要简洁一点，虽然都能达到想要的效果，当然是代码越少越好了。 ## gird 应用场景 看完了一维布局的几个应用场景，再看看 grid 的应用场景。 ### 经典的网页分区 页面的整体框架结构无外乎那几种，我们看一种最常见的管理平台的页面分区：  **使用 grid 实现：** ```csharp ``` **使用 flex 实现：** ```csharp ``` 可以看到虽然 flex 也实现了一样的页面分区效果，但 HTML 的结构确要比 grid 更加复杂，需要嵌套更多的 HTML 结构用来实现复杂的二维布局。 ### 卡片列表 看一种最常见的卡片列表布局：  **使用 grid 实现：** ```csharp ``` **使用 flex 实现：** ```csharp ``` flex 实现的卡片列表必须明确指定一个宽度，这个宽度值需要减去列间距得出；而 grid 实现的这种卡片列表则无需考虑这种计算问题，直接会自动适应。 ### 二维布局 flex 与 grid 对比 在二维布局领域，grid 当之无愧的强大，虽然 flex 也可以实现一毛一样的效果，当不可避免的是代码冗余。 ## 总结 flex 在一维布局中更能发挥优势，grid 在宏观布局或二维布局中优势更加明显。 在不考虑代码冗余的情况下，flex 和 grid 都能在对方领域抢饭碗。 实际开发中，grid 标准浏览器都是在 2017 年之后才实现的，flex 标准则是在 2012 年就开始支持，项目但凡需要兼容老古董浏览器，grid就别想了，赖克宝吃不到小天鹅~~