ReactNative style样式之Flexbox布局样式

ReactNative style样式之Flexbox布局样式


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


参考链接2

参考链接1

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

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

display: flex;

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

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

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


ReactNative 中的 flexDirection: column(默认值) | column-reverse | row | row-reverse;
flex-direction 排列方向

1.3 flex-wrap 换行

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


ReactNative 中的 flexWrap: nowrap | wrap ;
flex-wrap 换行

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

flex-flow : row || nowrap;
flex-flow

1.5 justify-content 水平排列方式

justify-content: flex-start | flex-end | center | space-between | space-around;
justify-content 水平排列方式


ReactNative中的 justifyContent: flex-start | flex-end | center | space-between | space-around;
justify-content 水平排列方式

1.6 align-items 垂直排列方式

align-items: flex-start | flex-end | center | baseline | stretch;
align-items 垂直排列方式


ReactNative中的 alignItems: flex-start | flex-end | center | stretch;
align-items 垂直排列方式

2. 容器中项目的属性

2.1 order ReactNative无

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

2.2 flex-grow ReactNative无

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

2.3 flex-shrink ReactNative无

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

2.4 flex-basis ReactNative无

flex-basis

2.5 flex ReactNative无

flex

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 的属性

1
2
3
4
5
6
7
8
9
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 ;
FerryVip wechat
扫描二维码和我唠嗑吧!