display:flex; 弹性布局,只对下一级元素有效

justify-content:flex-start; 左对齐

justify-content:flex-end; 右对齐

justify-content:flex-center; 居中对齐

justify-content:space-around; 平分空间

justify-content:space-between; 两端对齐,各个元素之间空隙相同

align-items:flex-center; 容器上下居中

align-items:flex-stretch; 容器上下居中且子元素占满容器高度,子容器不设置高度

display:grid; 网格布局,只对下一级元素有效,默认容器内的内容填满空间

grid-template-colums 定义每列宽度

grid-template-row 定义每行高度

repeat(auto-fill,30px) 重复填充,每个格子30px

grid-template-columns:1fr 2fr; 定义两列,第二列宽度是第一列的两倍

grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); 元素平均分,如果宽度不够就换行

minmax() auto

grid-row-gap 行间距

grid-column-gap 列间距

grid-gap:5px; 行间距和列间距一样

grid-area:span 2 / span 1; 在该元素位置开始 占两行1列