官网学习网址
https://facebook.github.io/react-native/docs/layout-props
学习参考网址
https://www.jianshu.com/p/5053807b7fcd
基本概念
主轴(main axis)和与之互垂的交叉轴(cross axis)
flex-direction
决定主轴的方向
row | row-reverse | column | column-reverse
从左往右 | 从右往左 | 从上到下 | 从下到上
若设置了row 属性,主轴的方向为Horizontal-水平方向,交叉轴的方向为Vertical-垂直方向
同理,设置了column,主轴和交叉轴方向相反。
flex-wrap
决定容器内项目是否换行
nowrap | wrap | wrap-reverse
不换行 | 从左上到右下换行 | 从左下到右上换行
flex-flow
flex-direction 和 flex-wrap的简写形式
justify-content
定义了项目在主轴的对齐方式
flex-start | flex-end | center | space-between | space-around
均为从左往右排
不使用多余空间 | 从右往左排 | 居中排 | 多余空间平均为间隔 | 间隔以及两边的间隔
align-item
定义了子项目在交叉轴上的对齐方式
flex-start | flex-end | center | baseline | stretch
主轴为row时
上对齐 | 下对齐 | 中间对齐 | 子项目中的文字对齐 | 上下对齐 铺满整个View
align-content
定义了多轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用
flex-start | flex-end | center | space-between | space-around
与交叉轴起点对齐 | 与交叉轴终点对齐 | 与交叉轴中线对齐 | 轴线两端对齐,之间的间隔相等 | 每个轴线两侧的间隔相等