RN学习之flexbox学习

  发布日期:   2017-06-01
  最新修改:   2020-08-04
  阅读次数:   80 次

flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持

flexbox布局是伸缩容器(container)和伸缩项目(item)组成

Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

按照伸缩流的方向布局

伸缩容器有主轴和交叉轴组成! 主轴既可以是水平轴,也可以是垂直轴

flexbox目前还处于草稿状态,所有在使用flexbox布局的时候,需要加上各个浏览器的私有前缀,即-webkit -moz -ms -o等

伸缩容器的属性

1.display

display:flex | inline-flex

块级伸缩容器 行内级伸缩容器

2.flex-direction

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

3.flex-wrap

伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行

flex-wrap:nowrap(默认值,不换行) | wrap(侧轴方向(默认垂直)从上往下换行) | wrap-reverse(侧轴方向(默认垂直)从下往上换行)

4.flex-flow

是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧轴 ,其默认值为 row nowrap

5.justify-content

用来定义伸缩项目在主轴线的对齐方式,语法为: justify-content:flex-start(默认值,r) | flex-end | center | space-between | space-around

6.align-items

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

7.align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式,语法为: align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值)

伸缩项目的属性

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(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)

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


   转载规则

《RN学习之flexbox学习字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。