react native--flexbox 布局

flexbox 布局

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;
}

说明： 这个时候，css的columns 在伸缩容器上没有效果，float,clear和vertical-align在伸缩项目上没有效果。

2, flex-direction
该属性用于指定主轴的方向，其语法是：

flex-direction: 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>

下面简要介绍这4个属性值的含义。

row(默认值): 伸缩容器若为水平方向轴，伸缩项目的排版方式为从左向右排列。示列CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
}

说明 flex-direction 的默认值为row，所以伸缩容器设置好后，如果是横向伸缩，则无需定义flex-direction。

row-reverse:伸缩容器若为水平方向轴，伸缩项目的排版方式为从右向左排列。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row-reverse;
}

column:伸缩容器若为垂直方向轴，伸缩项目的排版方式为从上向下排列。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: column
}

column-reverse:伸缩容器若为垂直方向轴，伸缩项目的排版方式为从下向上排列。示例CSS代码如下：

.flex-container{
    display:flex;
    flex-direction: column-reverse;
}

3. flex -wrap
该属性主要用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行其语法为

flex-wrap: nowrap | 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>

下面简要介绍这3个属性值的含义。

nowrap(默认值):即使空间不足，伸缩容器也不允许换行。示例CSS代码如下：

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

wrap:伸缩容器在空间不足的情况下允许换行。若主轴为水平轴，则换行的方向为从上到下。示例CSS代码如下：

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

wrap-reverse:伸缩容器在空间不足的情况下允许换行，若主轴为水平轴，则换行的方向为从下到上（和wrap相反）。示例CSS代码如下：

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

4. flex-flow
该属性是flex-direction和flex-wrap属性的缩写版本，它同时定义了伸缩容器的主轴和则轴，其默认值为 row nowrap。

该属性的语法为：

flex-flow: flex-direction flex-wrap

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>

下面我们以flex-flow: row wrap-reverse为例进行介绍，示例CSS代码如下所示：

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

5. justify-content

该属性用来定义伸缩项目沿主轴线的对齐方式，其语法为：

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

HTML代码如下：

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

下面简要介绍这5个属性值的含义。

flex-start(默认值):伸缩项目向主轴线的起始位置靠齐。示例CSS代码如下所示：

.flex-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 200px;
    height: 150px;
}
.flex-item {
    width: 50px;
    height: 50px;
}

flex-end:伸缩项目向主轴线的结束位置靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 200px;
    height: 150px;
}
.flex-item {
    width: 50px;
    height: 50px;
}

center:伸缩项目向主轴线的中间位置靠齐。示例CSS代码如下所示：

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width:200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

space-between:伸缩项目会平均地分布在主轴线里。第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴线的终点位置。示例CSS代码如下所示：

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

space-around: 伸缩项目会平均地分布在主轴线里，两端保留一半空间。示例CSS代码如下：

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 200px;
    height: 150px;
} 
.flex-item {
    width: 50px;
    height: 50px;
}

6. align-items
该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，其语法为：

align-items: flex-start | flex-end | center | baseline | stretch

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item” id=“item1”>1</span>
    <span class=“flex-item” id=“item2”>2</span>
    <span class=“flex-item” id=“item3”>3</span>
</span>

flex-start(默认值):伸缩项目向交叉轴的起始位置靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 200px;
    height:150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

flex-end: 伸缩项目向交叉轴的结束位置靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width:200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

center: 伸缩项目向交叉轴的中间靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 200px;
    height: 150px;
} 
.flex-item{
    width: 50px;
    height: 50px;
}

baseline: 伸缩项目根据它们的基线对齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

baseline: 伸缩项目根据它们的基线对齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}
#item1 {
    padding-top: 15px;
}
#item2 {
    padding-top: 10px;
}
#item3 {
    padding-top: 5px;
}

stretch(默认值): 伸缩项目在交叉轴方向拉伸填充整个伸缩容器。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
}

7. align-content
这个属性主要用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用 justify-content , 其语法为：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

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>

说明： flex-wrap: wrap 这个一定要开启，且它在出现换行情况下才能看到效果。下面提到的伸缩项目均指伸缩项目所在的行，因为这里调整的其实就是伸缩项目换行后每行之间的对齐方式。

下面简要介绍这6个属性值的含义。

flex-start(默认值): 伸缩项目向交叉轴的超始位置靠齐。 示例CSS代码如下：

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

flex-end: 伸缩项目向交叉轴的结束位置靠齐。 示例CSS代码如下：

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

center: 伸缩项目向交叉轴的中间位置靠齐。示例CSS代码如下：

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

space-between: 伸缩项目在交叉轴中平均分布。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    align-content: space-between;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

space-around: 伸缩项目在交叉轴中平均分布，且在两边各有一半空间。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}

stretch(默认值): 伸缩项目将会在交叉轴上伸展以占用剩余的空间。示例CSS代码如下：

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

2.1.4 伸缩项目属性

伸缩项目支持的属性有：
order
flex-grow
flex-shrink
flex-basis
flex
align-self

下面简要介绍这6个属性
1. order
这个属性用于定义项目排列顺序。数值越小，排列越靠前，默认值为0，其语法为：

order:integer

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item item1”>1</span>
    <span class=“flex-item item2”>2</span>
    <span class=“flex-item item3”>3</span>
    <span class=“flex-item item4”>4</span>
    <span class=“flex-item item5”>5</span>
</span>

示例CSS代码如下：

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

说明： 示例中由于类名为item5的元素设置order属性为-1，所以排在第一位

2. flex-grow
该属性定义伸缩项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有伸缩项目的flex-grow设置为1，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你将其中一个伸缩项的flex-grow值设置为2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。其语法为：

flex-grow: number /*其默认值为0*/

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item item1”>1</span>
    <span class=“flex-item item2”>2</span>
    <span class=“flex-item item3”>3</span>
    <span class=“flex-item item4”>4</span>
    <span class=“flex-item item5”>5</span>
</span>

示例CSS代码如下：

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

3. flex-shrink

该属性用来定义伸缩项目的收缩能力，其语法如下：

flex-shrink: number /*其默认值为1*/

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item item1”>1</span>
    <span class=“flex-item item2”>2</span>
    <span class=“flex-item item3”>3</span>
    <span class=“flex-item item4”>4</span>
    <span class=“flex-item item5”>5</span>
</span>

示例CSS代码如下：

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

说明： 本例子中，类名为item5的元素在空间不足的情况下，缩小为其他元素缩小大小的1/3。

4. flex-basis
该属性用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法如下：

flex-basis: length | auto

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item item1”>1</span>
    <span class=“flex-item item2”>2</span>
    <span class=“flex-item item3”>3</span>
    <span class=“flex-item item4”>4</span>
    <span class=“flex-item item5”>5</span>
</span>

示例CSS代码如下：

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

5. flex
该属性是flex-grow、flex-shrink和flex-basis这3个属性的缩写，其语法如下：

flex: none |  flex-grow flex-shrink flex-basis

其中第二个参数和第三个参数( flex-shrink 和 flex-basis )是可选参数。默认值为0 1 auto。

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item item1“>1</span>
    <span class=“flex-item item2“>2</span>
    <span class=“flex-item item3“>3</span>
</span>

示例CSS代码如下：

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

说明： 本例子中，类名为item3的元素宽度为50。当该元素被设置为flex:1后，该元素就会把伸缩容器的剩余空间占满，其实本质上就等于flex-grow:1。

该属性有两个块捷值：auto ( 即1 1 auto ) 和none ( 即 0 0 auto)。

6. align-self

该属性用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆写默认的对齐方式，其语法如下：

align-self: auto | flex-start | flex-end | center | baseline | stretch

HTML代码如下：

<span class=“flex-container”>
    <span class=“flex-item item1”>1</span>
    <span class=“flex-item item2”>2</span>
    <span class=“flex-item item3”>3</span>
</span>

下面简要介绍这6个属性值。
auto： 伸缩项目按照自身设置的宽高显示，如果没有设置，则按stretch来计算其值。示例CSS代码如下：

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 150px;
} 
.flex-item{
    width: 50px;
    height: 50px;
}
.item3{
    align-self: auto;
}

flex-start: 伸缩项目向交叉轴的开始位置靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}
.item3{
    align-self: flex-start;
}

flex-end: 伸缩项目向交叉轴的结束位置靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}
.item1{
    align-self: flex-end;
}

center: 伸缩项目向交叉轴的中心位置靠齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}
.item1{
    align-self: center;
}

baseline: 伸缩项目按基线对齐。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px;
    height: 50px;
}
.item1{
    align-self: baseline;
    font-size: 40px;
}
.item2{
    align-self: baseline;
    font-size: 30px;
}
.item3{
    align-self: baseline;
    font-size: 20px;
}

说明： 从示例中可以看到，每个伸缩项目都是沿交叉轴的方向，按照前一个伸缩项目的基线作为对齐起点的。

stretch: 伸缩项目在交叉轴方向占满伸缩容器。示例CSS代码如下：

.flex-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 150px;
}
.flex-item{
    width: 50px; 
}
.item1{
    align-self: stretch;
}
.item2{
    align-self: stretch;
    height: 50px;
}
.item3{
    height: 50px;
}

说明： 本例中交叉轴为垂直轴，所以只有在不设置高度的情况下才能看到效果。在类名为item2的元素中，虽然设置了stretch，但是由于设置了height，所以看不到效果。

2.1.5 在React Native 中使用 flexbox

React Native 将Web中的flexbox布局引入进来，使得视图的布局更加简单。从官网上了解到，React Native目前主要支持flexbox 的如下属性：
alignItems
alignSelf
flex
flexDirection
flexWrap
justifyContent

下面简要介绍这6个属性。
1.alignItems
该属性的用法同前面的align-items，区别在于它需要用驼峰写法，其语法如下：

alignItems: flex-start | flex-end | center | stretch

2.alignSelf
该属性的用法同上面的algin-self，区别在于它需要用驼峰拼写法，其语法如下：

alignSlef: auto | flex-start | flex-end | center | stretch 

3.flex
该属性的用法同上面的flex，其语法如下：

flex: number

4.flexDirection
该属性的用法同上面的flex-direction，区别在于React Native中默认的是column，其语法为：

flexDirection: row | column

5.flexWrap
该属性的用法同上面的flex-wrap，区别在于需要用驼峰拼写法，其语法如下：

flexWrap: wrap | nowrap

6.justifyContent
该属性的用法同上面的justify-Content，区别在于需要用驼峰拼写法，其语法如下：

justifyContent: flex-start | flex-end | center | space-between | space-around