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