弹性盒子模型：可以简洁，完整，响应式(自适应)的实现各种页面布局
display: flex;
容器（display: flex;）和项目：采用flex布局的元素，称为flex容器，他的所有子元素称为flex项目
主轴：元素盒子排列的方向（默认的排列方向x轴，当然不是说主轴就是x，因为我们可以通过属性来改变主轴的方向）
交叉轴：和主轴垂直的轴
注： 容器属性：给容器的属性（一下的属性全部给容器）
1、flex-direction改变主轴的方向。
属性值有四种情况：
{flex-direction: row;}/*默认值，从左往右排列*/
{flex-direction: row-reverse;}/*从右往左排列*/
{flex-direction: column;}/*从上往下排列*/
{flex-direction: column-reverse;}/*从下往上排列*/
2、flex-wrap控制容器是单行还是多行
属性值有三种情况：
{flex-wrap: nowrap; } /*默认值，不换行，会压缩，不会超出父级*/
{flex-wrap: wrap; } /*换行*/
{flex-wrap: wrap-reverse; } /*只是单纯的上下反转，不是序号改变*/
如下：
image.png
3、复合属性：flex-flow:direction wrap 复合属性包括主轴方向 和换行
例：
{flex-flow: row-reverse wrap; }//换行反向X轴
如图：
image.png
4、justify-content定义在主轴上的对齐方式
属性值五种：
flex-start //默认值，从主轴开始部分开始排列(说白了就是左对齐)
flex-end //从主轴结束部分开始排列（说白了是右对齐）
center //居中
space-between // 两端对齐，中间有相等的间隔
space-around //环绕对齐，每个项目两边的间隔相等
效果如下：
image.png
image.png
image.png
image.png
image.png
5、align-items定义弹性盒子项目在交叉轴上如何对齐
align-items: stretch; //默认值，交叉轴上沿对齐
align-items: flex-end; //交叉轴下沿对齐
align-items: center; // 交叉轴中部对齐
align-items: baseline; //项目里面的文字的基线对齐
附：沿基线对齐效果
image.png
6、align-content定义了多根主轴对齐方式，如果项目自有一根轴线，则不起作用（交叉轴的对齐方式）
属性值六种：
stretch //默认值，主轴线占满整个交叉轴（每行元素下沿都有一个主轴，且每行主轴的高度相等
flex-start //与交叉轴上沿紧密对齐
flex-end //与交叉轴下沿紧密对齐
center //居中
space-between // 与交叉轴两端对齐，中间主轴宽度平均分配
space-around //环绕对齐，，中间主轴宽度平均分配
附图：
image.png
image.png
image.png
image.png
image.png
image.png
