文档章节

ReactNative FlexBox布局

卖女孩的小火柴
 卖女孩的小火柴
发布于 2017/02/09 09:34
字数 1507
阅读 20
收藏 0
点赞 0
评论 0

FlexBox布局

在React Native中布局采用的是FleBox(弹性框)进行布局

FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。
FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题,因为既然React Native选择用FlexBox布局,那么React Native对FlexBox的支持自然会做的很好。

在React Native中尺寸是没有单位的
  • 在 Android 上 View 的长和宽的单位是 dp, 字体单位 sp
  • 在 iOS 上 单位是 pt

布局

父视图属性(容器属性):

  • flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
  • flexWrap enum(‘wrap’, ‘nowrap’)
  • justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
  • alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

flexDirection

  • flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。
  • row: 从左向右依次排列
  • row-reverse: 从右向左依次排列
  • column(default): 默认的排列方式,从上向下排列
  • column-reverse: 从下向上排列

flexWrap

  • flexWrap enum(‘wrap’, ‘nowrap’)
  • flexWrap: 属性定义了子元素在父视图内是否允许多行排列,默认为nowrap。
  • nowrap: flex的元素只排列在一行上,可能导致溢出。
  • wrap: flex的元素在一行排列不下时,就进行多行排列。

justifyContent

  • justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
  • justifyContent: 属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。
  • flex-start(default): 从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
  • flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
  • center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
  • space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
  • space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

alignItems

  • alignItems: enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
  • alignItems: 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch。
  • flex-start: 元素向侧轴起点对齐。
  • flex-end: 元素向侧轴终点对齐。
  • center: 元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
  • stretch: 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

子视图属性

  • alignSelf: enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
  • flex: number

alignSelf

  • alignSelf: enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
  • alignSelf: 属性以属性定义了flex容器内被选中项目的对齐方式。注意:alignSelf 属性可重写灵活容器的 alignItems 属性。
  • auto(default): 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
  • stretch: 元素被拉伸以适应容器。
  • center: 元素位于容器的中心。
  • flex-start: 元素位于容器的开头。
  • flex-end: 元素位于容器的结尾。

flex

  • flex: number
  • flex: 属性定义了一个可伸缩元素的能力,默认为0。在同一个view下,若每一个都配置 flex, 样式就是等比例划分, 若只一个Views配置, 那其他空间将被此view 占用

其他布局

边框

边大小(宽度)

  • borderBottomWidth: number 底部边框宽度
  • borderLeftWidth: number 左边框宽度
  • borderRightWidth: number 右边框宽度
  • borderTopWidth: number 顶部边框宽度
  • borderWidth: number 边框宽度

边颜色

  • borderBottomColor: number 底部边框颜色宽度
  • borderLeftColor: number 左边框颜色
  • borderRightColor: number 右边框颜色
  • borderTopColor: number 顶部边框颜色
  • borderColor: number 边框颜色

大小

  • width: number 宽
  • height: number 高

外边距

  • margin: number 外边距
  • marginBottom: number 下外边距
  • marginHorizontal: number 左右外边距
  • marginLeft: number 左外边距
  • marginRight: number 右外边距
  • marginTop: number 上外边距
  • marginVertical: number 上下外边距

内边距

  • padding: number 内边距
  • paddingBottom: number 下内边距
  • paddingHorizontal: number 左右内边距
  • paddingLeft: number 做内边距
  • paddingRight: number 右内边距
  • paddingTop: number 上内边距
  • paddingVertical: number 上下内边距

定位(position)

  • position: enum(‘absolute’, ‘relative’)属性设置元素的定位方式,为将要定位的元素定义定位规则。
  • relative: 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
  • absolute: 生成绝对定位的元素,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    • left: number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    • right: number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
    • top: number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    • bottom: number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
React Native中的FlexBox 和Web CSSS上FlexBox的不同之处
  • flexDirection: React Native中默认为flexDirection:’column’,在Web CSS中默认为flex-direction:’row’
  • alignItems: React Native中默认为alignItems:’stretch’,在Web CSS中默认align-items:’flex-start’
  • flex: 相比Web CSS的flex接受多参数,如:flex: 2 2 10%;,但在 React Native中flex只接受一个参数
  • 不支持属性:align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink

参考

A Complete Guide to Flexbox
Using CSS flexible boxes
Layout with Flexbox
Layout Props

本文转载自:http://blog.csdn.net/vispin/article/details/53023083

共有 人打赏支持
卖女孩的小火柴

卖女孩的小火柴

粉丝 3
博文 25
码字总数 124
作品 0
厦门
其他
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

本文首发于:www.css88.com/archives/86… 这篇文章是 CSS Grid 布局有用的资源和教程,帮你快速了解相关知识。同时还比较了 CSS Grid 、 Flexbox 、 Table 布局之间的区别,及适用情况。 CS...

愚人码头
2017/12/12
0
0
CSS3布局模式:伸缩布局盒(Flexbox)

介绍 Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快,所以当 Flexbox 被广泛支持并...

陈微
2013/09/14
0
0
想象一双结实而富有弹性的大腿:理解 Flexbox 布局

说明 本站不支持 CodePen 的脚本插入,可以到我的博客阅读直接显示示例代码的版本。 Flexbox 让人困惑 有很多谈及 Flexbox 的文章,但依然有不少前端对此感到困惑。一方面,flex 相关的 CSS ...

天方夜
07/04
0
0
Flexbox——快速布局神器

简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,...

Qianduaner
2013/08/25
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
07/12
0
0
Swift已有项目手动集成ReactNative

背景 记得2017年处写过一篇公司放弃RN血泪史的经历,当时之所以放弃时因为前期投入过多人力物力研究,以至于第一版本耗时太多未见成效,所有被老板叫停。真是"常在河边走哪有不湿鞋"最近因为...

LvesLi
06/27
0
0
React Native备课笔记Day01

(本节包括React Native介绍、特点分析、环境搭建、RN文件结构、View组件讲解、FlexBox布局及props与state) 一、React Native介绍 RN是React native的简称。在2015年的3月26日,Facebook公司...

阡陌有客
04/08
0
0
学习RN之前看这一篇React入门就够了

React是一个用于构建用户界面的 JavaScript 库,起源于Facebook内部项目,13年已经开源https://github.com/facebook/react。学习ReactNative首先要了解React相关的知识(当然可以和RN同步学习...

LvesLi
06/29
0
0
React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown error: not all success patterns were matched. It means that "react-native run-andro......

bill1987610
05/31
0
0
React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown error: not all success patterns were matched. It means that "react-native run-andro......

bill1987610
05/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
34分钟前
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部