菜鸡装B失败锦集-ReactNative支持的Flex6个属性

装逼布局常用6个属性：

一:flexDirection 指定主轴的放向。
1：row横着排列
{flexDirection: 'row'}
2：column竖着排列
{flexDirection: 'column'}

二：alignItems 相对于父层，子层竖着的排列方式。
1：flex-start： 相对于父层顶部对齐。
{alignItems: 'flex-start'}
2：flex-end： 相对于父层底部对齐。
{alignItems: 'flex-end'}
3：center： 相对于父层竖着居中。
{alignItems: 'center'}
4：stretch： 竖着填充整个容器。(前提是子组件没有设置height属性)
{alignItems: 'stretch'}

三：justifyContent 相对于父层，子层横着的排列方式。
1：flex-start：相对于父层左端靠齐。
{justifyContent: 'flex-start'}
2：flex-end：相对于父层右端靠齐。
{justifyContent: 'flex-end'}
3：center：相对于父层横着居中。
{justifyContent: 'center'}
4：space-between：相对于父层横着左右顶头平均分配。
{justifyContent: 'space-between'}
5：space-around：相对于父层横着左右平均分配，左右留空隙不顶头。
{justifyContent: 'space-around'}

四：alignSelf 设置子层单个的竖着对齐方式。
1：auto：拿自身宽高。
{alignSelf: 'auto'}
2：street：竖着拉伸。
{alignSelf: 'street'}
3：flex-start：相对于父层顶部对齐。
{alignSelf: 'flex-start'}
4：flex-end：相对于父层底部对齐。
{alignSelf: 'flex-end'}
5：center：竖着居中。
{alignSelf: 'center'}

五：flex 指定伸缩容器的比例
1：{flex: 1}
这个就是占满整个屏幕。
如果父层是flex:1子层有俩，每个flex:1就是平分整个界面。
如果父层是flex:1子层有三个，flex:1，flex:1，flex:2,就是1，2宽度等于第三个。
这个就是这么的神奇，自己活泥巴玩几下就知道了。

六：flexWrap 设置是否换行
1：nowrap：空间不够不换行。
2：wrap：空间不够自动换行。
这个没什么好说的了，换行否，英雄您自己瞅。