FlexBox布局

学完阮老师的flex教程后，api总是记不清，故在此记录下，方便快速查询。

 

 

确定主轴方向（flex默认为row，但是在react-native中默认为column）

flex-directtion：row，row-reverse，column，column-reverse。

 

主轴方向元素的折叠（wrap）方式

flex-wrap：nowrap，wrap，wrap-reverse

 

 

主轴方向上，个元素的排列对齐方式

justify-content：flex-start,center,flex-end,space-between,space-around

 

 

次轴方向上，各元素对齐方式（适用于justify-content：nowrap时）

align-items：flex-start,center,flex-end,stretch

 

 

各行在次轴上的分布方式（主轴wrap时，也就是主轴有多行时）

align-content：stretch, flex-start, center, flex-end, space-between, space-arround

 

 

注意：在react-native中有两点不同，flex-direction默认值为column，而且flex只能指定一个数字值。

 

参考地址：https://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1575363695451