我正在参加「掘金·启航计划」
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的布局的一些区别以及应用，两者的兼容性也是很不错的，再实际的开发中是完全可以使用的。
