自学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.父视图属性：

1. flexDirection:指定子视图在横轴上的方向。

   • row :横向排列。
   • column (default):纵向排列。
   • row-reverse:横向反向排列。
   • column-reverse:纵向反向排列
     

2. flexWrap:指定子视图是否能够换行。

   • nowrap 不换行
   • wrap 换行
     

3. justifyContent:对齐方式

   • flex-start(default):头部对齐
   • flex-end:尾部对齐
   • center:中间对齐(元素就像是像向电影院中间挤的观众……)
   • space-between:两端对齐，中间控件平均分配
   • soace-around:两端间隔宽度为中间元素之间间隔宽度的一半。
     

4. alignItems:

   • flex-start:顶部对齐。
   • flex-end:底部对齐。
   • center:中间对齐。
   • stretch:填满空间，如果项目未设置高度或设为auto，将占满整个容器的高度
     

5. alignContent(和alignItems的不同是alignItems用于单行，alignContent用于多行，如果用错了将会无任何效果，alignContent的具体的场景是横向滚动的情况):

   • flex-start：与交叉轴的起点对齐。
   • flex-end：与交叉轴的终点对齐。
   • center：与交叉轴的中点对齐。
   • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   • stretch（默认值）：轴线占满整个交叉轴。

3.子视图属性

1. alignSelf 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

   • auto（default）继承父容器的align-items属性，如果没有父容器则为"stretch"。
   • flex-start 元素位于容器的开头。
   • flex-end 元素位于容器的结尾。
   • center 元素位于容器的中心。
   • stretch 元素被拉伸以适应容器。
     

2. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

3. 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非常重要，可以借助它写出很多异形布局。

4. 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