4手把手教React Native实战之flexbox布局(伸缩属性)

Posted 东方耀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了4手把手教React Native实战之flexbox布局(伸缩属性)相关的知识,希望对你有一定的参考价值。

###伸缩项目的属性

1.order

定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值

2.flex-grow

定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空间,也不放大,语法为:flex-grow:整数值

3.flex-shrink

定义伸缩项目的收缩能力,默认值为1 ,其语法为:flex-shrink:整数值

4.flex-basis

用来设置伸缩项目的基准值,剩余的空间按比率进行伸缩,其语法为:flex-basis:length | auto,默认值为auto

5.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写,其语法为:flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数,默认值为:0 1 auto

6.align-self

用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为:align-self:auto | flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)

###在React Native中使用flexbox

RN目前主要支持flexbox的如下6个属性:

1.alignItems

用来定义伸缩项目在交叉轴上的对齐方式,语法为:
alignItems:flex-start(默认值) | flex-end | center | stretch

2.alignSelf

用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为:alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)

3.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写,其语法为:flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数,默认值为:0 1 auto

4.flexDirection

指定主轴的方向 flex-direction:row| row-reverse | column(默认值) | column-reverse

5.flexWrap

6.justifyContent



##4、配套视频(下载地址):https://yunpan.cn/cYIG6dCUNIRkB  访问密码 d6b6

以上是关于4手把手教React Native实战之flexbox布局(伸缩属性)的主要内容,如果未能解决你的问题,请参考以下文章

2手把手教React Native实战之从React到RN

7手把手教React Native实战之ReactJS

6手把手教React Native实战之JSX入门

8手把手教React Native实战之ReactJS组件生命周期

5手把手教React Native实战之盒子模型BoxApp

学习React Native必看的几个开源项目