自学React-native （第二天）-- 布局
自学React-native （第二天）-- 布局
1.前言：
RN中布局使用的是flex(弹性布局方式)。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
以下是css3中对flex的描述，RN中默认就给容器设置了display：flex所以可以直接使用。
flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;)，子容器才能根据自身的属性来布局，简单的说，就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境，那么子容器就无法使用flex的规则来划分父容器的空间。
讲到瓜分父容器的空间，那么首先需要讲一个很重要的词：剩余空间。
什么是剩余空间呢？具备flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下主轴就是水平从左向右的，侧轴是垂直从上到下的（类似书写模式）。 剩余空间就是父容器在主轴的方向上还有多少可用的空间。比如看下面这段html结构：
container就是父容器，B1 B2 B3就是子容器，假如container的width是500px，那么剩余空间就是：500px - B1.width - B2.width - B3.width。嗯就是这么简单！
2.父视图属性：
flexDirection:指定子视图在横轴上的方向。
- row :横向排列。
- column (default):纵向排列。
- row-reverse:横向反向排列。
- column-reverse:纵向反向排列
flexWrap:指定子视图是否能够换行。
- nowrap 不换行
- wrap 换行
justifyContent:对齐方式
- flex-start(default):头部对齐
- flex-end:尾部对齐
- center:中间对齐(元素就像是像向电影院中间挤的观众……)
- space-between:两端对齐，中间控件平均分配
- soace-around:两端间隔宽度为中间元素之间间隔宽度的一半。
alignItems:
- flex-start:顶部对齐。
- flex-end:底部对齐。
- center:中间对齐。
- stretch:填满空间，如果项目未设置高度或设为auto，将占满整个容器的高度
alignContent(和alignItems的不同是alignItems用于单行，alignContent用于多行，如果用错了将会无任何效果，alignContent的具体的场景是横向滚动的情况):
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
3.子视图属性
alignSelf 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
- auto（default）继承父容器的align-items属性，如果没有父容器则为"stretch"。
- flex-start 元素位于容器的开头。
- flex-end 元素位于容器的结尾。
- center 元素位于容器的中心。
- stretch 元素被拉伸以适应容器。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flexGrow 用于规定瓜分剩余空间所占的比率（剩余空间概念请看前言），比如父元素width=100,子元素A width=10,flexGrow为1，子元素B width=10 flexGrow为2,那么剩余空间值为：100 - 10 - 10 = 80，A元素可以额外分得：80*（1/（1+2）），A元素可以额外分得：80*（2/（1+2）），所以flexGrow非常重要，可以借助它写出很多异形布局。
- flexShrink 规定缩小比率，这个属性只在元素超出主轴时才发挥作用，缩小的比率按照设置值来，比如主容器 width=500,
一行的总width=600,那么剩余空间width=-100 子元素A的flexShrink=1,子元素B的flexShrink=2,那么各个元素分得的缩小width= -100*(1/(1+2))。
4.结语
flex确实是不错的布局框架，比以前梦游版的盒模型要清晰明了的多，无怪乎RN作为默认布局框架，对提高开发速度有莫大的帮助。
文章引用：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
以上是 自学React-native （第二天）-- 布局 的全部内容， 来源链接： utcz.com/z/384324.html
