React实战-对照ReactJs与ReactNative中的Flex用法
不管是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解决了很大的问题，我们不要再设置如此多的float, 为个元素居中伤透脑筋，以致网上出现有9种元素居中的做法，跟茴香豆的茴有4种写法1样，自从出现flex后，页面布局就变的轻松多了。但是ReactNative与ReactJs中写法又有很多不同。flex的基本用法我们可以直接看Flex的官方文档便可。
1.ReactJs中flex写法与普通html的不同
相比ReactNative来讲，ReactJs中flex的写法更接近普通html的flex写法，基本上无障碍，无损伤的继承了css的写法，不同主要在于JSX与html中的写法不同，之前的博文中有提到JSX写法的不同，固然这些不同仍然带到了ReactNative中。
2.ReactNative中Flex的写法与ReactJs中写法的不同
除继承了JSX语法对css命名的特殊性，ReactNative相比ReactJs在flex的写法也有所不同。主要表现在以下几点：
a.在ReactNative中flex的参数只支持单1数字
在ReactNative中可以采取flexFlow:'row'，但如果写成flexFlow:'row, wrap'，将不会起作用。
b.在ReactNative中flexDirection的默许值为column,而css中默许值为row
c.在ReactNative中alignItems默许值为stretch，而css中默许值为flex-start
d.在ReactNative中属性采取JSX中的写法，没有‘-’,并且第2个单词开始首字母大写（1般如此，非绝对正确）,而css中1般采取小写加‘-’连接，如：justify-content。
e.Flex的属性值在ReactNative和css中基本相同。
虽然ReactNative中flex属性写法不同，但值却是相同的。如：
flexDirection:'row-reverse'。
至于Flex的用法，还是那句话，想快速入门可以看1眼他人的介绍，细看还是看官网原文，如果你只想简单利用，只需了解主要的几个属性：
l Flex Direction：row,column
定义子元素排列方向，row横向排列，column纵向排列
l Justify Content：flex-start, center, flex-end, space-around, space-between
定义子元素排列的出发点，间隔空间。
l Align Items：flex-start, center, flex-end, stretch
定义子元素排列方向的纵向排列方式，也就是Flex Direction的垂直方向上的排列方式。
l Flex:number
定义子元素所占空间的比例。定义这个元素，width或height会失效。
了解了以上4个属性的用法，也基本了解了flex的用法，可以随便的布局了。