CSS中的Grid布局对比Flex布局，我该如何选择？

Hi~，我是一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~~

🍕 写在前面

CSS现在比较常用的布局方案就是Flex和Grid布局，像是之前的float、定位、表格布局等方案使用的也就比较少了；不过Flex和Grid该怎么选呢？先说结论：当然是全都都要；

这篇文章将会从区别、兼容性、上手速度来简单比较一下两种布局方案。

🍔 Flex和Grid的区别

Flex是一维布局，可以将子项目设置为行或者列，不能同时设置行和列，而Grid是二维布局，可以将子项目设置行列。

通过上面图可以看出两种布局的区别。

兼容性

两种布局方案的兼容性还是很不错的，先来看一下caniuse中的截图：

• Flex布局浏览器兼容性：

• Grid布局浏览器兼容性：

这兼容性可以放心在生产环境中使用了，除非你还需要兼容IE。不过这年头正经人谁还兼容IE啊。

🍿 上手速度

如果要对比上手速度的话，肯定是Flex布局的上手更容易一点，从概念上、语法上都会比Grid更容易一些，下面两张图，是我之前总结Flex和Grid布局的一些属性以及含义：

从图的长度看来，明显是Grid布局的内容要多一些，而且又是因为是二维布局，肯定是没有一维的容易理解。

🍗 如何选择

当然，两种布局都要用啊，不过两种布局有不同的侧重，这里就简单举个例子吧：

Grid布局：

• 后台外层布局
• 卡片列表

Flex布局：

• 表单组件
• 卡片组件
• 各种列表
• 各种菜单

🍯 写在最后

这篇文章简单介绍Flex布局和Grid的布局的一些区别以及应用，两者的兼容性也是很不错的，再实际的开发中是完全可以使用的。