Flex布局语法
块级元素 display : flex;
行内元素 display : inline-flex;
1、flex-direction属性
flex-direction 决定主轴的方向（即项目的排列方向）
flex-direction ：row-reverse (会改变item的排列方向 改为 从右到左的顺序 主轴仍然是水平方向)
flex-direction ：row (默认 item从左到右的顺序排列) 主轴为水平方向，起点在左端、右端
flex-direction ：column 会改变主轴方向 改成垂直方向 是从上到下的顺序
flex-direction ：column-reverse 会改变顺序 改成从下到上的顺序 主轴还是垂直方向
2、flex-wrap属性
flex-wrap属性定义了如果一条轴线排不下，如何换行
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
不加换行属性会出现下面场景：如果父元素盒子的总宽度小于子元素宽度的总和，子元素设置的宽高一样，应该是正方形，不加换行就会出现列表自动给宽度自适应成盒子宽度的总长度
加换行属性如下，变成正常的大小
总结：flex-flow是复合属性：是flex-direction和flex-wrap的简写形式，默认值为row nowrap可以写成
flex-flow:column wrap，取两个属性的值即可 只写一个值 另一个就是默认值
3、 justify-content属性
justify-content 定义了项目在主轴上的对齐方式
justify-content：flex-start（默认值）：左对齐
justify-content：flex-end：右对齐
justify-content：center： 居中 就算有margin也会把整个子元素居中，并且左右两边的距离边框的大小相等
justify-content：space-between：两端对齐，项目之间的间隔都相等
justify-content：space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
justify-content: space-evenly;项目之间左右的间距以及项目和边框之间的间距 都相等，会受到子元素设置margin的影响
4、align-items属性
align-items 定义项目在交叉轴上对齐方式
align-items： flex-start：交叉轴的起点对齐 默认值
align-items：flex-end：交叉轴的终点对齐
align-items：center：交叉轴的中点对齐
align-items：baseline: 项目的第一行文字的基线对齐
align-items：stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
5、align-content属性
align-content 定义了多根轴线的对齐方式
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值） 轴线占满整个交叉轴 ★ 子元素不设置高度或者高度auto
align-content 对比align-items 前者是将多根轴线当做一个整体实现居中，后者将每个轴线单个当做一个整体居中
5、 order属性
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
6、align-self属性
align-self: auto | flex-start | flex-end | center | stretch;
交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 ★在多根轴线下设置无效
7、 flex复合属性
flex: flex-grow flex-shrink flex-basis
flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。主要作用是：分配剩余空的， flex-grow:1;表示把剩余的空间都充满，如果每个项目都设置flex-grow:1不要使用flex-wrap进行换行
flex-shrink用来表示是否被压缩 默认值是1 表示被压缩，改成0表示不被压缩 保持设置的尺寸
flex-basis默认值是auto flex-basis优先级比width要高，同时设置，只会展示flex-basis的宽度
