css中grid布局和flex布局总结

flex

容器属性：
(1)flex-flow:row nowrap //主轴的方向和换行
(2)justify-content: // 主轴对齐
(3)align-content: // 多交叉轴对齐
(4)align-items:// 单轴的对齐方式

项目属性：
(1)order: // 项目排列顺序
(2)flex: // 项目占据空间的缩放大小
(3)align-self: //项目对齐，和单轴交叉轴对齐方式参数一样

grid

容器属性:

（1）grid-gap: 行与行 列与列 //间隔
（2）grid-auto-flow: //排列顺序
（3）grid-auto-columns/rows // 超出网格，超出部分项目的大小
（4）place-items: 上中下 左中右 // 内容在盒子中的对齐方式
（5）place-content:上中下 左中右 //内容区域在容器里面的对齐方式

项目
（1）grid-area: / / / ;//
指定项目的位置
（2）place-self:上中下 左中右 // 单个项目在网格中的位置

详细介绍flex布局和grid布局，参考阮一峰的博客:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html