React实战-对比ReactJs与ReactNative中的Flex用法

概述React实战-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解决了很大的问题，我们不要再设置如此多的float,为个元素居中伤透脑筋，以至网上出现有9种元素居中的做法，跟茴香豆的茴有4种写法一

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,stretch

定义子元素排列方向的纵向排列方式，也就是Flex Direction的垂直方向上的排列方式。

l Flex:number

定义子元素所占空间的比例。定义这个元素，wIDth或height会失效。

了解了以上4个属性的用法，也基本了解了flex的用法，可以随便的布局了。

 

 

总结

以上是内存溢出为你收集整理的React实战-对比ReactJs与ReactNative中的Flex用法全部内容，希望文章能够帮你解决React实战-对比ReactJs与ReactNative中的Flex用法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。