ReactNative style样式之Flexbox布局样式

---

Flexbox布局样式 ReactNative是参考文档大于0.29的版本

---

参考链接2

参考链接1

1. 6个属性设置在容器上

1.1 任何一个容器都可以指定为Flex布局。ReactNative无

display: flex;

display: inline-flex; //行内元素也可以使用Flex布局。

1.2 flex-direction 属性决定主轴的方向（即项目的排列方向）。

flex-direction: row(默认值) | row-reverse | column | column-reverse;

---

ReactNative 中的 flexDirection: column(默认值) | column-reverse | row | row-reverse;

1.3 flex-wrap 换行

flex-wrap: nowrap | wrap | wrap-reverse;

---

ReactNative 中的 flexWrap: nowrap | wrap ;

1.4 flex-flow flex-direction 和flex-wrap 的简写 ReactNative无

flex-flow : row || nowrap;

1.5 justify-content 水平排列方式

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

---

ReactNative中的 justifyContent: flex-start | flex-end | center | space-between | space-around;

1.6 align-items 垂直排列方式

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

---

ReactNative中的 alignItems: flex-start | flex-end | center | stretch;

2. 容器中项目的属性

2.1 order ReactNative无

order :<number>; /* default 0 */属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2.2 flex-grow ReactNative无

flex-grow:<number>; /* default 0 */属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

2.3 flex-shrink ReactNative无

flex-shrink: ; /* default 1 */属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis

2.4 flex-basis ReactNative无

2.5 flex ReactNative无

2.6 align-self

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

---

ReactNative中的 alignSelf: auto | flex-start | flex-end | center | stretch;

3. FlexBox布局目前支持React Native 的属性

FlexBox布局目前支持React Native 的属性有如下6个：
(1) flex :number  大于0的时候才可伸缩，按照大小显示伸缩比例；
(2) flexDirection :column(容器设置的属性:主轴方向默认－垂直方向，从上倒下)| `column-reverse` | row（水平方向，从左到右）| `row-reverse`；
(3) flexWrap :wrap(换行) －－nowrap(不换行)//容器设置的属性
(4) alignItems :flex-start | flex-end | center | stretch (容器设置的属性:伸缩项目在伸缩容器中的交叉轴的对齐方式)；
(5) justifyContent : flex-start | flex-end | center | space-between | space-aronud （容器设置的属性:伸缩项目沿着垂直方向的对齐方式）；
(6) alignSelf : flex-start | flex-end | center | auto | stretch。（伸缩项目在交叉轴的对齐方式）；
(7) position : 'absolute' | 'relative' ;
(8) zIndex : number ;