一、初步了解什么是弹性布局
1. 为什么需要弹性盒子？
2. 弹性盒子有什么优点？

• 争对市面上各种设备的需求，设备的尺寸大不相同，打开的网页效果也大不相同，但是由于最初写的时候使用的是固定的尺寸大小、或多或少难以满足所有的设备要求、且每次更新迭代就需要调整对应的数据，这时候就需要一个能自适应尺寸大小的盒子来把我们需要展示的东西包裹起来，网页尺寸大，他就跟着变大，网页尺寸小，他也随着你设定的默认代码缩小自身尺寸或者换行，这也就大大缩小了工作量，不再需要根据对应的平台或者设备来一个一个更改其代码参数。
• 弹性盒子的优点：方便快捷，不需要引入多余的JS，只需要在对应属性设置display: flex;你就可以得到一个弹性的盒子，他默认随着页面大小的改变而改变盒子内部元素的大小，且弹性盒子有两条轴，水平轴和主轴，你可以根据轴进行对盒子内部元素的排列、定位，换行方式、等等。。。

direction属性

display: flex;/*让一个元素或者盒子的属性变成弹性盒子*/

direction属性

flex-direction:row /* 水平排列（行） 元素按照 1 2 3 4 依次排列*/
flex-direction:row-reverse/* 水平反转排列 元素按照 4 3 2 1 依次排列*/

flex-direction:column/* 垂直排列（列） 元素按照
1
2
3
4
*/
flex-direction:column=reverse
/* 垂直排列（列） 元素按照
4
3
2
1
*/

wrap属性

/*盒子内部的空间大小不满足元素的大小时换行*/
/*默认最右边的元素先换*/
flex-wrap: wrap;

/*元素不换行*/
flex-wrap: nowrap;

/*元素反向换行*/
flex-wrap: wrap-reverse;

flow属性

/*flex-flow是复合属性以下等价于*/
/*默认值为 row nowrap  行排列 不换行*/
flex-flow: row wrap;
/*等价于 flex-direction:row;*/
/*等价于 flex-wrap: wrap;*/

justify-content 属性

justify-content属性用于设置元素在行的对齐

justify-content:center; /*水平居中*/
justify-content:flex-start; /*轴起始点对其（左边）*/
justify-content:flex-end; /*轴结束点对其（右边）*/
justify-content:space-between; /*左右两端对齐*/
justify-content:flex-end; /*轴结束点对其（右边）*/
justify-content:space-around;/*每个元素中间间距相等*/

align-items 属性

align-items: center;/*垂直居中*/
align-items: flex-start;/*轴起始点对齐*/
align-items: flex-end;/*轴结束点对齐*/
align-items: baseline ;/*项目的第一行文字基线对齐*/
align-items: stretch;/*内容铺满整个容器（如果项目未设置高度或者高度为auto，将占满整个容器的高度）*/

flex-grow 属性

flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

flex-grow: 0;
flex-grow: 1;

flex-shrink 属性

flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

flex-shrink: 0;
flex-shrink: 1;

flex-basis属性

flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。
flex属性
flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

flex: 1 0 50%;

align-self 属性

align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式

align-self: flex-start | flex-end | center | baseline | stretch

order属性

用于控制弹性元素的位置，默认为0 数值越小越靠左，可以负数或者整数

order: 0;
order: 1;