文档章节

ReactNative FlexBox布局

卖女孩的小火柴
 卖女孩的小火柴
发布于 2017/02/09 09:34
字数 1507
阅读 23
收藏 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
React Native 0.10.0 发布,用 React 编写移动应用

React Native v0.10.0 发布,更新内容如下: A bug in css-layout that would cause 100% CPU usage with a specific combination of flex properties has been fixed Removing native even......

oschina
2015/08/28
3.9K
15
React Native v0.4 发布,用 React 编写移动应用

React Native v0.4 发布,自从 React Native 开源以来,包括超过 12.5k stars,1000 commits,500 issues,380 pull requests 和 100 贡献者,还有 35 款插件 和 1 个 AppStore 应用! 此版本...

oschina
2015/04/18
6.9K
4
5分钟吃透React Native Flexbox

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

idisfkj
08/28
0
0
ReactNative之参照具体示例来看RN中的FlexBox布局

今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客。上篇博客《ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State》中我们通过一个HelloWorld的一个示例介绍了RN的环境...

青玉伏案
10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部