文档章节

ReactNative FlexBox布局

卖女孩的小火柴
 卖女孩的小火柴
发布于 2017/02/09 09:34
字数 1507
阅读 21
收藏 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
厦门
其他
iOS 界面布局利器 - FlexLib

FlexLib FlexLib是用Obj-c语言编写的ios布局框架。 该布局框架基于flexbox模型,这个模型是web端的布局标准。基于flexbox模型,FlexLib提供了强大的布局能力,并且易于使用。 使用FlexLib, ...

zorrokimi
08/10
0
0
5分钟吃透React Native Flexbox

今天我们来聊聊Flexbox,它是前端的一个布局方式。在React Native中是主流布局方式。如果你刚刚入门React Native,或者没有多少前端的技术经验,亦或者对其半知半解,那么这篇文章将很好的帮...

idisfkj
08/28
0
0
CSS3布局模式:伸缩布局盒(Flexbox)

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

陈微
2013/09/14
0
0
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

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

愚人码头
2017/12/12
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部