首先需要了解H5中盒子模型的flex-box的属性，其可以分为伸缩容器属性和伸缩Item属性
伸缩容器的属性
1. display设置容器为行内还是块级标签
语法为：display：flex | inline-flex
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 的缩写方式
语法为：flex- flow：row nowrap (默认值) | （其他的自行组合）
5. justify-content
用来定义伸缩容器在主轴方向上的对齐方式。
语法为：justify-content：flex-start(从左到右,默认值) | flex-end(从右到左) | center(水平居中) | space-between(平均分布在主轴方向上，每个item中间的距离相等，第一个item和作后一个item挨着容器) | space-around(平均分布在主轴方向上，第一个item和作后一个item距离容器的距离是其他itme之间距离的一半)
justify-content.png
6. align-items
用来定义伸缩容器在交叉轴方向上的对齐方式。
语法为：align-items：flex-start(从上到下,默认值) | flex-end(从下到上) | center(垂直居中) | baseline(基准线) | stretch(上下伸缩)
align-item.jpg
7. align-content
用来定义伸缩容器在交叉轴方向上的对齐方式。
语法为：align-items：flex-start(从上到下,默认值) | flex-end(从下到上) | center(垂直居中) | space-between(平均分布在交叉轴方向上，每个item中间的距离相等，第一个item和作后一个item挨着容器) | space-around(平均分布在交叉轴方向上，第一个item和作后一个item 距离容器的距离是其他itme之间距离的一半) | stretch(默认值)
伸缩Itme的属性
1. order
定义项目的排列顺序，数值越小排列越靠前，默认值为0 ；
语法为：order：整数值
2. flex-grow
定义项目的放大比例，默认值为0，表示存在剩余空间也不放大。
语法为：flex-grow：整数值 ；例如三个div的flex-grow分别为（1,2,1），那么放大比例也是1：2：1
3. flex-shrink
定义项目的收缩比例，默认值为1，表示剩余空间不足的情况下才会缩小。
语法为：flex-shrink：整数值；例如三个div的flex-shrink分别为（1,2,1），那么缩小比例也是1：2：1
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（伸缩项目在交叉轴方向沾满容器，如果交叉轴为垂直方向，只有在不设置高度的情况下才能看到效果）
ReactNative 使用到的相关属性
1. justityContent
用来定义伸缩容器在主轴方向上的对齐方式。
语法为：justifyContent：flex-start(从左到右,默认值) | flex-end(从右到左) | center(水平居中) | space-between(平均分布在主轴方向上，每个item中间的距离相等，第一个item和作后一个item挨着容器) | space-around(平均分布在主轴方向上，第一个item和作后一个item距离容器的距离是其他itme之间距离的一半)
2. alignItem
用来定义伸缩容器在交叉轴方向上的对齐方式。
语法为：alignItems：flex-start(从上到下,默认值) | flex-end(从下到上) | center(垂直居中) | stretch(上下伸缩)
3.flexDirection
指定主轴方向。
语法为：flexDirection：row(从左到右，默认值) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上)
4. flexWrap
伸缩容器在主轴方向空间不够的情况下，是否换行，以及如何换行。
语法为：flexWrap：nowrap(不换行，默认值) | wrap(向下换行) | wrap-reverse(向上换行)
5. alignSelf
用来设置单独的交叉轴上的对齐方式，会覆盖默认的对齐方式。
语法为：alignSelf：auto | flex-start | flex-end | center | stretch
（伸缩项目在交叉轴方向沾满容器，如果交叉轴为垂直方向，只有在不设置高度的情况下才能看到效果）
6. flex
是flex-grow flex-shrink flex-basis这三个属性的缩写。
语法为：flex：none | flex-grow flex-shrink flex-basis第二和第三个参数可先，默认值： 0 1 auto
网友评论