设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3085|回复: 497

[视频教程] 4、手把手教React Native实战之flexbox布局(伸缩属性)

  [复制链接]

401

主题

762

帖子

6666

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6666
发表于 2016-6-16 10:32:15 | 显示全部楼层 |阅读模式
#4、手把手教React Native实战之flexbox布局(伸缩属性)

###伸缩项目的属性

1.order

定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值


加作者微信公众号(dongfangyao888)或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码


2.flex-grow

定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空间,也不放大,语法为:flex-grow:整数值

3.flex-shrink

定义伸缩项目的收缩能力,默认值为1 ,其语法为:flex-shrink:整数值

4.flex-basis

用来设置伸缩项目的基准值,剩余的空间按比率进行伸缩,其语法为:flex-basis:length | auto,默认值为auto

5.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写,其语法为:flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数,默认值为:0 1 auto

6.align-self

用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为:align-self:auto | flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)

###在React Native中使用flexbox

RN目前主要支持flexbox的如下6个属性:

1.alignItems

用来定义伸缩项目在交叉轴上的对齐方式,语法为:
alignItems:flex-start(默认值) | flex-end | center | stretch

2.alignSelf

用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为:alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)

3.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写,其语法为:flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数,默认值为:0 1 auto

4.flexDirection

指定主轴的方向 flex-direction:row| row-reverse | column(默认值) | column-reverse

5.flexWrap

6.justifyContent



##4、配套视频(下载地址)
【回复本帖才可见】
游客,如果您要查看本帖隐藏内容请回复




react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

1

主题

84

帖子

203

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
203
发表于 2016-6-23 20:52:02 | 显示全部楼层
今天是郁闷的一天。。。。
回复 支持 反对

使用道具 举报

0

主题

25

帖子

100

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
100
发表于 2016-6-26 08:11:28 | 显示全部楼层
学习了。。。。。。。
回复

使用道具 举报

0

主题

3

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2016-6-30 15:19:12 | 显示全部楼层
嘻嘻 学习了
回复 支持 反对

使用道具 举报

0

主题

225

帖子

474

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
474
发表于 2016-6-30 18:02:11 | 显示全部楼层
没几个人啊。
回复 支持 反对

使用道具 举报

0

主题

1

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2016-7-4 09:20:00 | 显示全部楼层
学习一下。。。。。。。。。。。。。。。。
回复

使用道具 举报

0

主题

158

帖子

386

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
386
发表于 2016-7-4 12:44:03 | 显示全部楼层
持续学习中
回复 支持 反对

使用道具 举报

0

主题

4

帖子

14

积分

新手上路

Rank: 1

积分
14
发表于 2016-7-4 15:28:36 | 显示全部楼层
我要第四课
回复 支持 反对

使用道具 举报

0

主题

5

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2016-7-4 17:39:28 | 显示全部楼层
b832 b832 b832 b832
回复 支持 反对

使用道具 举报

0

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2016-7-4 22:18:38 | 显示全部楼层
xuexie xuexi
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-1-20 22:49 , Processed in 0.142805 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表