小程序开发学习-flex布局

1.flex-direction

改变子盒子排列的方向
1.flex-direction:row（默认）

2.flex-direction:column

3.flex-direction:row-reverse

4.flex-direction:column-reverse

2.justify-content

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
1.justify-content：flex-start

2.justify-content:flex-end

3.justify-content:center

4.justify-content:space-between
元素紧靠父盒子两边

5.justify-content:space-evenly
间距相等

6.justify-content:space-around
从图中可看出空间的占位比例

3.align-items

设置或检索弹性盒子元素在侧轴（竖轴）方向上的对齐方式
1.align-items:flex-start

2.align-items:flex-end

3.align-items:center

4.align-items:stretch
当item2的高度没有设置时，会自动拉伸至与父元素高度一致

注：align-items:baseline本人也不是特别理解，其它教程说开发过程中用得比较少，所以也不想太过于纠结这个属性，以后深入理解之后再补充该属性。

4.flex-wrap

子盒子换行方式
1.flex-wrap:nowrap

2.flex-wrap:wrap

3.flex-wrap:wrap-reverse

5.align-content

用于存在多行子盒子的排列方式
1.align-content:stretch（默认）
如果子盒子没有设置高度，则会拉伸子盒子的高度

2.align-content:flex-start

3.align-content:flex-end

4.align-content:space-between

5.align-content:space-around

6.align-content:center