完整版
基本概念
flex布局基本概念
父容器属性
- flexDirection
默认取值flexColumn 确定子组件排列方向，取值及效果如下
-
row
row.png -
column
column.png -
row-reverse
row-reverse.png -
column-reverse
column-reverse.png
-flexWrap
默认取值nowrap 定义子元素在父视图内是否允许多行排列 取值及效果如下
-
nowrap
nowrap.png -
wrap
wrap.png
-justifyContent
默认取值flex-start 定义子元素在主轴方向的分配方式 取值及效果如下
-
flex-start
flex-start.png -
flex-end
flex-end.png -
center
center.png -
space-between
space-between.png -
space-around
sapce-around.png
-alignItems
默认取值stretch 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐 取值及效果如下
-
flex-start
flex-start.png -
flex-end
flex-end.png -
center
center.png
