弹性盒子简单用法

设置弹性盒子关键属性，
display:flex;
设置在父元素上的属性
1、盒子主轴的设置
属性名：flex-direction: row;默认水平向右为正
属性值：
row 水平想向右为主轴正方向
row-reveres 水平向左为正方向
columen 垂直向下
columen-reveres 垂直向上

2、换行
属性名：flex-wrop:nowrap;默认 不换行，超出的部分会进行伸缩
属性名: nowrop 不换行
wrop 换行

3、主轴对齐方式，以列为单位进行排列
属性名：justify-contrnt：flex-start 默认值，
属性值：flex-start 以主轴正方向开始排列
flex-end 以主轴反方向开始排列
center 从主轴中间开始向两端排列
space-bettwen 主轴两端向主轴中间排列 空白部分平均分配
space-around 主轴中间向两端排列 空白部分平均分配
4、单行在交叉轴上的排列方式
属性名：align-items:stretch; 默认值，多出边界的单位会进行压缩，使其所有内容都在盒子内
属性值：
strerch:多出边界的但会将所有单位进行等比例压缩
flex-start:在交叉轴正方向开始排列（左对齐，注意交叉轴的方向问题）
flex-end:在交叉轴开始的方向开始排列（右对齐）
center:从交叉轴中间向两端排列（中间对其）
baseline：搭配margin使用，设置其中一个单位的margin值当做基线，然后整体基线对齐

5、多行在交叉轴方向上的对齐方式
属性名：align-content：flex-start;从交叉轴方向正方向开始排列
属性值：
flex-start：从交叉轴正方向开始排列
flex-end：从交叉轴正方向反方向开始排列
center：从交叉轴中间向两端开始排列
space-bettwen 从两端想中间排列
stretch：正常排列，超出的部分会进行等比例的压缩

设置在子项上的属性

1、设置子项在交叉轴方向的排列方式
属性名：align-self:
属性值：flex-start:
flex-end:
center:
baseline:
stretch:

2、子项排列顺序
属性名：order：默认值为0 值小的在前，值大的在后

3、设置子项的弹性
属性名：flex
属性值：
flex-grow：默认值0 按值来分配多余的空间
flex-basis：和width同等效果，优先于width 可以搭配使用，basis用来当变换的值，最大值为width
flex-shrink：默认为1 按值来超出父元素的部分进行压缩