<< React Native 入门与实战>>----第2章 R

2.1 flexbox布局
flexbox是React Native应用开发不可少的内容

2.1.2 布局模型

  flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，其中设为display:flex或display:inline-flex的元素称为伸缩容器，伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局模型来排版

上面图片引用网址:http://www.w3cplus.com/css3/flexbox-basics.html默认情况下伸缩容器由两根轴组成，主轴(main axis)和交叉轴(cross axis)，其中主轴的开始位置叫做main start，结束位置叫main end,交叉轴的开始位置叫cross start，结束位置叫cross end，伸缩项目在主轴上占据的空间叫main size,在交叉轴上占据的空间叫cross size,根据设置情况的不同，主轴既可以是水平轴，也可以是垂直轴，默认情况下伸缩项目总是沿着主轴，从主轴位置以主轴结束位置进行排列，flexbox还在草稿状态，需要加上各个浏览器的私有前缀，即-wekit,-moz,mx，-o等

2.1.3 伸缩容器属性
支持的属性有:

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items

• align-content

  下面介绍这几个属性

  1、display 属性用于指定元素是否为伸缩容器，其语法为display:flex | inline-flex HTML代码为

<span class="flex-container"></span>

属性值的含义:
flex:这个值用于产生块级伸缩容器，示例CSS代码如下:
.flex-container{
display:flex;
}
inline-flex用于产生行内级伸缩容器，示例CSS代码如下:
.flex-container{
display:inline-flex;
}

2、flex-direction:该属性用于指定主轴的方向语法
flex-dirction:row|row-reverse|column|column-reverse
html代码:

<span class ="flex-container">
    <span class="flex-item">1</span>
    <span class="flex-item">2</span>
    <span class="flex-item">3</span>
</span>

row(默认值):从左向右排列
.flex-container{
display:flex;
flex-direction:row;
}
row-reverse:从右向左排列
column:从上向下排列
column从下向上排列

3、flex-wrap主要用于指定伸缩容器的主轴线空间不足的情况下，是否换行以及如何换行，语法为
flex-wrap:nowap|wrap|wrap-reverse
HTML代码如下:

<span class ="flex-container">
    <span class="flex-item">1</span>
    <span class="flex-item">2</span>
    <span class="flex-item">3</span>
    <span class="flex-item">4</span>
    <span class="flex-item">5</span>
</span>

nowrap(默认值):即使空间不足，伸缩容器也不允许换行

.flex-container{ display:flex; flex-direction:row; flex-wrap:nowrap; width:200px; height:150px; }
.flex-item{ width:50px; height:50px; }

wrap:不允许换行,换行方向从上到下
wrap-reverse:允许换行，则换行的方向为从下到上(和wrap相关)下面会是三个上面是两个
flex-flow:该属性是flex-direction和flex-wrap属性的缩写版本，默认是row nowrap
5、justify-content:该属性用于定义伸缩项目沿主轴线的对齐方式，其

语法:justify-content:flex-start|flex-end|center|space-between|space-around