Flex布局是前端比較靈活的一種布局方式，能否滿足各種布局要求和需求，在React Native 小程序 Flutter中都有廣泛的應(yīng)用。
首先從Flex對象上，分為兩類對象：
1.flex container，flex容器類，里面的元素會按照flex模式來布局。 元素聲明css屬性display:flex或者inline-flex，即為flex container。
2.flex item , 處于flex container下的直接子元素，即為flex item類。
flex container上的容器相關(guān)flex核心屬性有以下：
- flex-direction 用來指定main axis和cross axis方向。
- justify-content 用來指定flex item在main axis的對齊方式
- align-items 指定flex item在cross axis的對齊方式
- flex-wrap 指定flex container是單行還是多行
- align-content 指定多行flex item在cross axis的對齊方式
flex item上的容器相關(guān)flex核心屬性有以下：
- align-self 用于覆蓋flex container設(shè)置的align-items，單獨決定該flex item 在cross axis的對齊方式。
- flex-grow 決定flex item在main axis上如何擴展，只有flex-container還有剩余的size時，這個屬性才生效。如果所有items這個值的總和為sum，sum>=1，則grow屬性作為權(quán)重比參與擴展，擴展大小=itemSize * grow / sum，如果sum<1，則擴展大小=itemSize * grow。默認是0，就是默認不參與擴展。
- flex-shrink 決定flex item在main axis上如何收縮，只有超出flex-container時，這個屬性才會生效，計算比較麻煩，不建議使用。默認是1，就是默認會參與收縮，而且是按用戶size大小比例參與收縮至container限制大小。如果均為0，則表示不參與收縮。
- flex-basis 用來設(shè)置flex item在main axis方向的size，默認auto/content，是由內(nèi)容本身的size決定。flex item最終的size，由不同優(yōu)先級屬性來指定，最高一級 max-XX min-X > flex-basis > width/height > 內(nèi)容本身的size
組合屬性：
- flex container：
- flex-flow 是 flex-direction || flex-wrap 簡寫
- flex item:
- flex 是 flex-grow flex-shrink? || flex-basis 簡寫
