FlexBox基础

一 布局属性（super view）

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-flow的缩写，默认值为flex-flow：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

    伸缩项目出现换行后对齐方式，要开启的话须要设置warp，默认值为stretch。 align-content：flex-start | flex-end | center | space-between | space-around | stretch

 

二 伸缩属性（self view）

1.order

    定义项目的排列顺序，数值越小，排列越靠前，默认值为0 order：整数（也能够为负数）

2.flex-grow

    定义伸缩项目的比例，默认值为0，即表示若是存在剩余空间，也不放大。当A为1，B为2的时候，自动全屏伸缩，B为A的2倍   flex-grow：整数值

3.flex-shrink

    定义伸缩项目的收缩能力，与grow相反，默认值为1 flex-shrink:整数值

4.flex-basis

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

5.flex

    是flex-grow flex-shrink flex-basis这三个属性的缩写，后两个参数可选，默认值为：0 1 auto

6.align-self

    用来设置单独的伸缩项目在交叉轴的对齐方式 align-self:auto | flex-start | flex-end | center | baseline | stretch(若是交叉轴为垂直方向，只有不设置高度，才有效)

 

三 RN属性

    1.alignItems：没有baseline

    2.alignSelf：没有baseline

    3.flex

    4.flexDirection：默认column（决定了组件内部子组件排列方式）

    5.flexWrap    

    6.justufyContent：默认flex-start（决定了在一个方向上如何排列子组件）

 

四 样式属性

1.字体

fontFamily 字体族
fontSize 字体大小
fontStyle 字体样式，正常，倾斜等，值为enum('normal', 'italic')
fontWeight 字体粗细，值为enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing 字符间隔
lineHeight 行高
textAlign 字体对齐方式，值为enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine 貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed') 貌似没效果，修饰的线的类型
textDecorationColor 貌似没效果，修饰的线的颜色
writingDirection enum("auto", 'ltr', 'rtl') 不知道什么属性，写做方向？从左到右？从右到左？

2.图片

resizeMode enum('cover', 'contain', 'stretch')
overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
tintColor 着色，rgb字符串类型
opacity 透明度

3.图像变化

scaleX:水平方向缩放
scaleY:垂直方向缩放
rotation:旋转
translateX:水平方向平移
translateY:水平方向平移

4.阴影

shadowColor
shadowOffset
shadowOpacity
shadowRadiu