flexbox布局与React Native

/ 1评 / 0

flexbox是flexible Box的缩写,弹性盒子布局,主流浏览器都支持。
flexbox布局由伸缩容器(container)和伸缩项目(item)组成。
flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,flex
元素将伸展大小以填充可用空间,当flex元素超出可用空间时将自动缩小。总之,flex元素是可以让
你的布局根据浏览器的大小变化进行自动伸缩的。
但是现在还不算是一个发行标准,所以要加上浏览器私有前缀:
    webkit-box
    -moz-box
    ms-flexbox
    webkit-flex

伸缩容器属性

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(默认值) | 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

2.flex-grow
    定义伸缩项目的放大比例,默认值为0,表示存在剩余空间也不放大

3.flex-shrink
    定义伸缩项目的收缩能力,默认值为1

4.flex-basis
    用来设置伸缩项目的基准值,剩余的空间按比率进行伸缩,flex-basis:length|auto(默认)

5.flex
    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支持的六个属性

1.alignItems
    用来定义伸缩项目在交叉轴上的对齐方式,语法为:
    align-items:flex-start(默认值) | flex-end | center | baseline(不能设置高度) | stretch(拉伸,不能设置高度)

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

3.flex
    flex:none | flex-grow flex-shrink flex-basis,默认值为:0 1 auto

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

5.flexWrap
    伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行
    flex-wrap: nowrap(默认值) | wrap | wrap-reverse

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

一条回应:“flexbox布局与React Native”

  1. pan说道:

    大叔三天没有更新了~