设为首页收藏本站

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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4722|回复: 652

[视频教程] 3、手把手教React Native实战之flexbox布局(RN基础)

  [复制链接]

401

主题

762

帖子

6951

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6951
发表于 2016-6-16 10:29:20 | 显示全部楼层 |阅读模式
#3、手把手教React Native实战之flexbox布局(RN基础)
flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持

flexbox布局是伸缩容器(container)和伸缩项目(item)组成

Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。


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


按照伸缩流的方向布局

伸缩容器有主轴和交叉轴组成! 主轴既可以是水平轴,也可以是垂直轴

flexbox目前还处于草稿状态,所有在使用flexbox布局的时候,需要加上各个浏览器的私有前缀,即-webkit -moz -ms -o等

###伸缩容器的属性

1.display
  
  display:flex | inline-flex

  块级伸缩容器   行内级伸缩容器

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

3.flex-wrap

  伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行

  flex-wrap:nowrap(默认值) | wrap | wrap-reverse

4.flex-flow

是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧轴
,其默认值为 row nowrap

5.justify-content

用来定义伸缩项目在主轴线的对齐方式,语法为:
justify-content:flex-start(默认值) | flex-end | center | space-between | space-around

6.align-items

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

7.align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式,语法为:
align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值)



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



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

使用道具 举报

0

主题

18

帖子

44

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
44
发表于 2016-6-23 17:54:48 | 显示全部楼层
学习了---------------------
回复 支持 反对

使用道具 举报

1

主题

84

帖子

203

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

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

使用道具 举报

0

主题

25

帖子

100

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
100
发表于 2016-6-26 07:53:55 | 显示全部楼层
这东西真方便....
回复 支持 反对

使用道具 举报

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2016-6-26 11:04:01 | 显示全部楼层
刚接触RN, 尝试学习下
回复 支持 反对

使用道具 举报

0

主题

16

帖子

44

积分

新手上路

Rank: 1

积分
44
发表于 2016-7-1 17:41:18 | 显示全部楼层
刚开始感觉不习惯,用了以后挺好的
回复 支持 反对

使用道具 举报

0

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2016-7-3 09:21:43 | 显示全部楼层
has had had had
回复 支持 反对

使用道具 举报

0

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2016-7-3 09:29:37 | 显示全部楼层
为什么下载不了?
回复 支持 反对

使用道具 举报

0

主题

162

帖子

400

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

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

使用道具 举报

0

主题

5

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2016-7-4 17:38:36 | 显示全部楼层

学习了---------------------
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-9-22 13:47 , Processed in 0.147400 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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