伸缩布局

将父盒子设置为display：flex（块级元素），display：inline-flex（内联元素）

弹性盒子有六个属性：

1.flex-drection：row | row-reverse | clomun | clomun-reverse（决定主轴的方向，也就是x轴方向项目的排列方式）

2.felx-wrap：nowrap | wrap | wrap-reserve （决定多余的项目是否换行<默认不换行><换行，第一行在上面><换行，第一行在下面>）

3.flex-flow : flex-direction flex-wrap（是flex-direction和flex-wrap的缩写，默认是row nowrap）

4.justify-content : flex-start<左对齐> | flex-end<右对齐> | center<居中> | space-between<两端对齐，项目之间的间隔都相等> | space-around<项目两边的间隔都相等，所以最两侧的间距比中间的间距要小1/2>

5.align-item:flex-start<y轴起点开始对齐> | flex-end<y轴终点向上进行对齐> | center<y轴中点进行对齐> | baseline<项目的第一行文字对齐> | stretch<如果项目没有定义高度或者高度是auto，那么项目会占满整个盒子>

项目的属性：

1.order：integer （定义项目的排列顺序，数值越小，那么项目排列越向前）

2.flex-grow：number（定义项目的放大比例，默认是0）

3.flex-shrink：number（定义项目的缩小比例，默认是0）

4.flex-basis：number（值可以是项目的width或者height，固定项目的固定空间）

5.flex：grow shrink basis的缩写，