首页 > 程序开发 > web前端 > HTML/CSS > 正文
React实战-对比ReactJs与ReactNative中的Flex用法
2016-09-22       个评论    来源:超期服役软件开发者的博客  
收藏    我要投稿

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

无论是Web还是移动端,让人花费大量精力和时间的是页面布局,在新Css3中提供了flex为我们解决了很大的问题,我们不要再设置如此多的float, 为个元素居中伤透脑筋,以至网上出现有9种元素居中的做法,跟茴香豆的茴有4种写法一样,自从出现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的参数只支持单一数字

在ReactNative中可以采用flexFlow:'row',但如果写成flexFlow:'row, wrap',将不会起作用。

b.在ReactNative中flexDirection的默认值为column,而css中默认值为row

c.在ReactNative中alignItems默认值为stretch,而css中默认值为flex-start

d.在ReactNative中属性采用JSX中的写法,没有‘-’,并且第二个单词开始首字母大写(一般如此,非绝对正确),而css中一般采用小写加‘-’连接,如:justify-content。

e.Flex的属性值在ReactNative和css中基本相同。

虽然ReactNative中flex属性写法不同,但值却是相同的。如:

flexDirection:'row-reverse'。

至于Flex的用法,还是那句话,想快速入门可以看一眼别人的介绍,细看还是看官网原文,如果你只想简单应用,只需了解主要的几个属性:

lFlex Direction:row,column

定义子元素排列方向,row横向排列,column纵向排列

lJustify Content:flex-start, center, flex-end, space-around, space-between

定义子元素排列的起点,间隔空间。

lAlign Items:flex-start, center, flex-end, stretch

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

lFlex:number

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

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

点击复制链接 与好友分享!回本站首页
相关TAG标签 React实战
上一篇:React实战-如何快速构建一个ReactNative的Demo
下一篇:React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI)
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站