（前面是大概简介，后面为具体实例）可参考此文章
一、flex布局简介
flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。
使用：任何容器（行内元素可设置为display:inline-block）;
特点：空间分布在行中进行，而非整体
二、grid布局简介
Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。
使用：对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几列，然后对子元素设置占据几行几列
特点：二维网格结构，十分便于操作
基本概念：
*container：网格容器，设置display:grid就将容器变成了网格容器
*item：网格项，指网格容器中每一个子元素
*line：网格线，网格之间的分界线
*track：网格轨道，两条相邻的网格线之间的空间（行或列）
*cell：网格单元，每个小网格
*area：网格区域，四条网格线包围起来的区域
*fr：在自由空间进行分配的一个单位
三、实例操作
1.flex
（1）
2.grid
（1）grid-template-columns、grid-template-rows、grid-gap -> grid -row-gap + grid-column-gap
设置属性值为若干个像素，即为几行几列宽度、高度的网格
eg：display: grid;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 50px 50px; //两行三列高为50排序，宽为100px的网格
grid-gap:2px 4px; //设置格子之间间隙，是grid-column-gap和grid-row-gap的组合
//grid-template-columns：200px 1fr 1fr 2fr; //若容器宽度为1000px，则分成四列（固定的第一列200px，和按比例分的其他三列：200、200、400）
//grid-template-columns：1fr 1fr 1fr 1fr; //等价于repeat（4,1fr）
【注】：grid中有一个隐式网格轨道，子元素超出网格数量时会有一个默认的值约束多出的子元素
可以通过设置grid-auto-rows和grid-auto-columns来定义行和列。查看详细内容
(2)grid-column ->grid-column-start + grid-column-end 、grid-row ->grid-row-start + grid-row-end
eg:container包含其他组件（可以给网格线起名，便于使用）
.container {
display: grid;
grid-template-columns: 200px [main-start] 1fr [main-end] 200px;
grid-template-rows: 200px 200px;
grid-gap: 2px 4px;
}
.footer {
grid-column: main-start / main-end; //开始网格号/结束网格号（可为负数，auto，span num【代表占几个格子】）
}
（3）grid-template-areas、grid-area
【注】：可以通过类似于画图的方式来部署网格
eg:
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 50px 300px 50px;
grid-template-areas:
". h ."
"l m r"
". f .";
grid-gap: 2px 4px;
}
.header {
grid-area: h;
}
.left {
grid-area: l;
}
.right {
grid-area: r;
}
.main {
grid-area: m;
}
.footer {
grid-area: f;
}
(4)repeat 进阶（auto-fit、auto-fill）
目标：在屏幕大小变化时设置格子大小随之变化、自动填充，设置格子最小最大宽度
实现：
.container{
grid-template-columns: repeat(9, minmax(250px, 1fr)); //设置格子在250px和1fr范围内变化，会出现滚动条
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); //作用同上，会自动换行，不会出现滚动条
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); //作用同上，会自动换行，
}
auto-fill 倾向于容纳更多的列，所以如果在满足宽度限制的前提下还有空间能容纳新列，那么它会暗中创建一些列来填充当前行。即使创建出来的列没有任何内容，但实际上还是占据了行的空间。
auto-fit 倾向于使用最少列数占满当前行空间，浏览器先是和 auto-fill 一样，暗中创建一些列来填充多出来的行空间，然后坍缩（collapse）这些列以便腾出空间让其余列扩张。
部分参考此文章链接
来源：CSDN
作者：张小年_ZY
链接：https://blog.csdn.net/weixin_40115949/article/details/79900276