Flex 布局&&弹性盒模型属性||容器属性

首先声明一个坐标轴（main axis）， 垂直方向的是交叉轴（cross axis）

flex-direction 属性 主轴横向，row 项目沿主轴排序，从左到右

flex-direction:row-reverse; 主轴方向反转排序方式 项目一 以最右边为开始排序

flex-direction:column ;项目以左上角为开始纵向排序

flex-direction:column-reverse;项目一以反方向排序自下向上

flex-wrap:nopwrap;项目不换行

flex-wrap:wrap;项目换行

flex-wrap:wrap-reverse; 项目一 button 第一个以自下向上的换行

flex-flow： flex-direction wrap；
可以结合flex-direction和wrap一起使用

justify-content:flex-start;默认值 项目沿主轴对齐项目间不留间距

justify-content：center；项目沿主轴居中

justify-content:flex-end;项目以主轴终点对齐

justify-content:space-between;第一个项目以主轴的起点距离为0和最后一个项目距离主轴的终点距离为0

justify-content:space-around;第一个项目距离起点为中间距离一半和最后一个项目的距离终点中间距离一半

justify-content：space-evenly；第一个项目距离起点和最后一个项目距离终点的距离和中间的距离相等

align-items：stretch；为默认值当未设置项目的尺寸时项目填满行高

align-items：flex-strat；默认值项目以主轴起点对齐

align-items：center；项目沿交叉轴中心对齐沿主轴排序

align-items:flex-end;项目以交叉轴终点对齐

align-items：baseline；项目以第一个项目的字体为基线对齐

align-content：stretch；默认值 多行元素在交叉轴对齐方式
align-content:;属性会以多行做为整体进行对齐，容器必须添加flex-warp属性

align-content:flex-strat;项目换行时边距为0

align-content:center;项目在交叉轴居中

align-items:flex-end;项目以交叉轴底部对齐

align-content：space-between；项目首行距离起点的距离为0和尾行距离交叉轴的终点距离为0

align-content：space-around；项目首行距离起点和尾行距离终点的距离是中间项目的距离一半

align-content：space-evenly；项目首行距离起点的距离和项目尾行距离终点的距离和中间项目的距离相等

order 属性最大的向后排序 order里面属性越小的向前排序，可以设置负数

flex-shrink 给容器child设置
不要给child级设置高否则不能生效



flex-grow:0;默认值 值是number 扩张因子填满容器