Flexbox属性图解说明

1.flexDirection: 控制子控件的主轴方向，默认值为col

row：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

col（默认值）：主轴为垂直方向，起点在上沿。

col-reverse：主轴为垂直方向，起点在下沿。

2.flexWrap 表示在主轴轴线上排列不下时，视图的换行方式，默认值 no-wrap

no-wrap

wrap

wrap-reverse

3.justifyContent，控制在主轴方向上子控件如何分布，默认值为flex-start

flex-start:沿主轴起点对齐

center: 居中对齐

flex-end: 沿主轴终点对齐

space-between: 两端对齐

space-around: 分散对齐

4.alignItems: 控制垂直于主轴方向上的对齐方式，该属性在只有一行内容时生效（多行时alignContent生效），默认为stretch

flex-start， center， flex-end，space-between, space-around与justifyContent中的保持一致

stretch:拉伸方式，比如父窗口纵向排列的话，相当于所有子元素宽度自动为100%

baseline:基线对齐

5.alignContent: 控制垂直于主轴方向上的对齐方式，该属性在有多行内容时生效（单行时alignItems生效），默认为flex-start，所有属性值与alignItems一致

6.alignSelf: 该属性作用在子控件上，前边的其他属性作用在父元素上，取值与alignItems完全一样

7. position: 定位方式，默认为relative，表示使用流式布局，也可以改为absolute，表示绝对定位方式，需要指定该元素的位置

8. flex/flexGrink/flexShrink: 表示当所有子元素不足以撑满(或者超过）父窗口大小时，子元素拉伸（或者缩小）的权重

这里可以实时演示各种flexbox属性：https://xluos.github.io/demo/flexbox/