flexbox基础

flexbox中的属性

一、弹性容器

1、display:flex | inline-flex
块级伸缩容器 | 行级伸缩容器

2、flex-direction: row | row-reverse | column | column-reverse
主轴方向

3、flex-wrap: nowrap | wrap | wrap-reverse
主轴方向空间不足时是否换行及如何换行

4、flex-flow: row nowrap | ...
flex-direction + flex-wrap

5、justify-content: flex-start | flex-end | center | space-around | space-between
伸缩项目在主轴线的对齐方式

6、align-items: flex-start | flex-end | center | baseline | stretch
伸缩项目在交叉轴上的对齐方式

7、align-content: stretch | flex-start | flex-end | center | space-around | space-between
伸缩项目出现换行后在交叉轴上的对齐方式

二、弹性物体

1、order: 0 | 整数值
物体的排列顺序，数值越小，排列越靠前

2、flex-grow: 0 | 整数值
弹性物体的放大比例，即表示如果存在剩余空间也不放大，剩余空间按各值分配比例

3、flex-shrink: 1 | 整数值
弹性物体的收缩比例

4、flex-basis: auto | length
弹性物体的基准值，剩余空间按比例进行伸缩

5、flex: 0 1 auto | flex-grow flex-shrink flex-basis
flex-grow，flex-shrink，flex-basis三个属性缩写

6、align-self: auto | flex-start | flex-end | center | baseline | stretch(弹性物品在交叉轴方向占满弹性容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)
单独弹性物体在交叉轴上的对齐方式，会覆盖默认的对齐方式

RN支持flexbox的如下6个属性：

1、alignItems: flex-start | flex-end | center | stretch

2、flexDirection: column | column-reverse | row-reverse | row

3、flexWrap: nowrap | wrap | wrap-reverse

4、justifyContent: flex-start | flex-end | center | space-around | space-between

5、alignSelf: auto | flex-start | flex-end | center | stretch

6、flex: 0 1 auto | flex-grow flex-shrink flex-basis