小程序 四、flex布局

1、flex-direction属性
row(默认值):沿着x轴，从左到右排列。
row-reverse:沿着x轴，从右到左排列。
column:沿着y轴，从上到下排列。
column-reverse:沿着Y轴，从下到上。

2.flex-wrap属性
nowrap(默认):不换行。
wrap:超出自动向下换行。
wrap-reverse:超出自动向上换行。

3.justify-content属性
flex-start:靠近x轴起点，无间隙。
center:居中显示，多个对象间不留间隙。
flex-end:靠近x轴终点，多对象不留间距。
space-between:对象间间距相等，外围无间距。
space-around：外围间距为对象间距的一半。
space-evenly:对象之间间距等于外围间距。4.align-items属性
设置对象在行中的对齐方式。
stretch:项目拉伸至填满行高。
flex-start:对象于顶部无间隙。
center:对象在行中居中。
flex-end:对象于底部无间隙。
baseline:对象的第一行文字的基线对齐。

5.align-content属性
多行排列时，设置行在y轴方向上的对齐方式，以及分配行之间及其周围多余的空间。
stretch(默认值):当未设置对象尺寸，将各行中的对象拉伸至填满y轴。当设置了对象尺寸，对象尺寸不变，对象行拉伸至填满Y轴
flex-start：首行在交叉轴起点开始排列，行间不留间距。
center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。
flex-end：尾行在交叉轴终点开始排列，行间不留间距。
space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。
space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

对象属性

1.order属性
设置对象沿X轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。

2.flex-shrink属性
当对象在X轴方向上溢出时，通过设置对象收缩因子来压缩对象适应 容器。属性值为对象的收缩因子，属性值取非负数。

3.flex-grow属性
当对象在X轴方向上还有空闲时，通过设置对象扩张因子进行剩余空间的分配。属性值为对象的扩张因子，属性值取非负数。

4.flex-basis属性
定义了在分配多余空间之前，项目占据的x轴空间
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高与height。
当容器设置flex-direction为column或column-reverse时，flex-basis优先级高
需要注意的是，当flex-basis和width(或height)，其中一个属性值为auto时，非auto的优先级高

5.align-self属性

设置对象在行中y轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对对象的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。