flexbox简洁

FlexBox也叫弹性盒布局,在FlexBox弹性布局中，容器会根据需要调整条目的尺寸和顺序，填充空间。FlexBox主要有伸缩容器和伸缩项目组成。

FlexBox伸缩容器属性

display:flex|inline-flex 指定是否用弹性盒模型

flex-direction:row|row-reverse|column|column-reverse 控制伸缩容器在主轴的方向

flex-wrap:wrap|nowrap|wrap-reverse 用来控制是单行还是多行，默认值nowrap,单行

flex-flow:[flex-direction][flex-wrap]

justify-content:flex-start|flex-end|center|space-between|space-around 主轴的对齐方式

align-items:flex-start|flex-end|center|baseline|stretch在侧轴的对齐方式

align-content:flex-start|flex-end|center|space-between|space-around|stretch主轴方向伸缩行的对齐方式

FlexBox伸缩项目属性

order:定义项目的排列顺序，数值越小越靠前

flex:flex-grow(扩展比例) flex-shrink(收缩比例) flex-basis(伸缩基准)

align-self:auto|flex-start|flex-end|center|baseline|stretch 设置单独的伸缩项目在交叉轴上的对齐方式

在react-native中的应用

flex:number

flexDirection:row|column

alignItems

alignSelf

flexWrap justifyContent