flex布局和grid布局

一.flex布局

（一）原理

flex container，简称容器，他的所有子元素自动成为容器成员，成为flex项目，简称项目。通过对父元素添加flex属性，来控制子盒子的位置和排列方式

（二）常见的父项（容器）元素

2.1 flex-direction：设置主轴方向

默认值row，row-reverse从右到左；
column，从上到下，column-reverse，从下到上。

2.2 justify-content：设置主轴上的子元素的排列方式

默认值flex-start，从头部开始（如果主轴是x轴，则从左到右）
flex-end，从尾部开始排列
center，在主轴居中对齐（如果主轴是x轴则水平居中）
space-around，平分剩余空间
space-between，先两边贴边，再平分剩余空间

2.3 flex-wrap：设置子元素是否换行（折行）

默认值nowrap不换行，wrap换行

2.4 align-content：设置侧轴上的子元素的排列方式（多行）

默认值flex-start，从侧轴的头部开始
flex-end，从侧轴的尾部开始排列
center，在侧轴中间显示
space-around，平分剩余空间
space-between，先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度

2.5 align-items：设置侧轴上的子元素的排列方式（单行）

默认值flex，从上到下，flex-end，从下到上
center，挤在一起居中（垂直居中）
stretch，拉伸

2.6 flex-flow：复合元素，相当于设置flex-direction和flex-wrap

先flex-direction，后flex-wrap

（三）常见的子项（项目）元素

3.1 flex：< number >;/default 0/

定义子元素项目分配剩余空间，用flex来表示占多少分数
是由flex-grow，flex-shrink，flex-basis三个属性的缩写

3.2 align-self 控制子项自己在侧轴上的排列方式

允许单个项目有与其他项目不一样的排列方式，可覆盖align-items属性；默认值为auto，表示父元素的align-items属性，如果没有父元素，则等同于stretch
flex-start侧轴开始位置，flex-end结束位置，center居中位置，baseline基线位置，stretch侧轴默认拉伸

3.3 order：< number >显示顺序

3.4 margin：auto实现水平垂直原理

二.grid布局

（一）布局概念：行与列，网格线（网格布局中的横向的从纵线的线条）

（二）容器属性

2.1 grid-template-rows（行属性）grid-template-columns（列属性）

①像素

②百分比

③重复函数repeat（num1，num2）

num1重复次数，num2需要重复的数值

④自动填充auto-fill，应用在重复函数中，代表的是根据需要重复的数值，进行自动填充数量

⑤auto

⑥片段划分fr，分数

⑦minmax（num1，num2）

2.2 间距属性grid-row-gap/grid-column-gap

2.3顺序：grid-auto-flow：row / column

2.4宽度高度和对齐方式

水平对齐方式：justify-items：start/center/end
垂直对齐方式：align-items：start/center/end

2.5网格在容器中的位置

justify-content / align-content

（三）项目属性

合并单元格

grid-column-start纵向网格线的开始占位
grid-column-end纵向网格线的结束占位
grid-row-start横向网格线的开始占位
grid-row-end横向网格线的结束占位