Flex布局
flex-direction :设置元素的排列方向
row:从左向右排列
row-reverse:从右向左排列（从右边开始，顺序也会发生变化）
column 从上到下
column-resverse 从下到上（虽然是从下到上，只不过是里面的顺序发生了变化而已，并不是沿着底部开始）
flex-wrap:设置容器内的元素是否换行
nowrap:元素永远不换行，超出一定界限后进行里面的元素同比例的缩放
wrap:元素超过界限后自动换行到第二列
wrap-reverse 元素超过界限后逆向的进行换行
justify-content:设置元素在主轴上的对齐方式
flex-start:从开始处对齐
flex-end:从末尾处对齐，但是顺序是不会发生变化的，这是针对主轴是水平方向的（如果是垂直方向的时候，就是从容器的底部开始对齐，顺序也是不会发生变化的）
center:居中对齐
space-between:从空格的两边对齐(元素之间的距离是一直的)
space-around：从空格的中间处对齐，元素连边的缝隙都相等，开始和结尾的两个元素都不置左右两边的顶
align-items:设置元素在垂直轴上的对其方式
flex-start：在垂直轴上对起点（向上或者向左）对其
flex-end：在垂直轴上对起点（向下或者向右）对其，顺序不变
center：在容器中的居中位置对其
baseline：当一行中，文字有大小变化，使用之后保证文字在一条线上
stretch:当元素不进行设置高度的时候，而容器设置高度，元素的高度会自动成为容器的高度，也就是说会自动拉伸成容器的高度
align-content:当轴线超过1条的时候，flex容器可以把多条轴线视为元素，进行对齐方式排列
cengter:将轴线在左右中间的位置进行排列，居中对其
flex-content:将轴线向左对其
flex-end:将轴线向右对其
steetch:在垂直为主轴的时候，当元素不设置高度的时候，元素会被水平轴拉伸，
space-between:在垂直轴为主轴的时候，垂直于左右两边对齐，中间为空
space-around:在垂直轴为主轴的时候，竖列方向上元素之间的空白相同，元素竖列方向不置顶
flex-direction和flex-wrap和justify-content和align-items和align-content都是设置在容器中，而不是设置在单个的元素上的
1.order:控制元素顺序：（设置元素排列默认为0，但是当数字有1,2,3则表示1在最前，3在最后）
eg:order:1; order:2; order:3;
2.flex-grow:设置元素放大的比例（默认为0）
flex-grow：1，当一行中的元素没有占满这个一行的时候（给这些元素设置了宽度或者不设置也可以），这一行有空余的时候，当在这一行的某一个元素设置了flex-frow：1的时候，这一行多余的空白处会自动放入此元素中，使得这一行的元素占满本行
3.flex-shrink:设置元素缩小的比例（默认为0）
使用情况：当一行中的元素超出了界限之后，可以给某一个元素设置不进行缩放或者进行缩放
4.flex-basis:设置元素固定或自动空间的占比
在没有占满或者不沾满的前提下，进行元素的设置，到多少（具体的数字）
flex-basis:100upx; flex-basis:300upx;
5.align-self：重写父级的属性，写在某一个元素上，改变父级给的样式，自己重新设置样式的意思
stretch flex-start flex-end auto(默认) center baseline
align-self ，order，flex-grow，flex-basis，flex-shrink是对元素进行设置的
