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