1. 介紹
- Flexble Box的縮寫(xiě)辜贵，彈性盒子布局，主流的瀏覽器都支持骗卜；
- flexbox布局是伸縮器（container，即容器）和伸縮項(xiàng)目（item左胞，即子控件）組成寇仓；
- flexbox布局的主體思想是元素可以改變大小以適應(yīng)可用空間，F(xiàn)lex元素可以讓布局根據(jù)瀏覽器的大小變化進(jìn)行自動(dòng)伸縮烤宙；
- 伸縮容器主要由主軸和次軸組成遍烦，主軸可以是水平軸（默認(rèn)）亦可是垂直軸，那么次軸就是垂直軸或水平軸躺枕；
2. 主要屬性
- 伸縮容器的屬性（即容器自身的屬性）
- display
- flex：塊級(jí)伸縮容器
- inline-flex：行內(nèi)級(jí)伸縮容器
- flex-direction：指定主軸的方向
- row：從左到右（默認(rèn)值）
- row-reverse：從右到左
- column：從上到下
- column-reverse
- flex-wrap：伸縮容器在主軸線方向空間不足的情況下服猪，是否換行以及該如何換行
- nowrap：不換行（默認(rèn)值）
- wrap：換行（如果主軸方向?yàn)閞ow時(shí)供填，則換行順序?yàn)樽陨隙拢?/li>
- wrap-reverse：反向換行（如果主軸方向?yàn)閞ow時(shí)，則換行順序?yàn)樽韵露希?/li>
- flex-flow：是flex-direction和flex-wrap的縮寫(xiě)版本罢猪，它同時(shí)定義了伸縮容器的主軸和換行方式（即2和3的集合體捕虽，其默認(rèn)值為row nowrap）
- justify-content：沿主軸線方向的對(duì)齊方式
- flex-start：起始位置（默認(rèn)值）
- flex-end：結(jié)束位置
- center：居中
- space-between：平均分配到主軸線上
- space-around：平均分配到主軸線上，并且子控件兩邊各留出相同的距離
- align-items：沿次軸方向的對(duì)齊方式
- flex-start：起始位置（默認(rèn)值）
- flex-end：結(jié)束位置
- center：居中
- baseline：基準(zhǔn)線對(duì)齊
- stretch：拉伸
- align-content：換行后在次軸方向上的對(duì)齊方式
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch：默認(rèn)值
- display
- 伸縮項(xiàng)目的屬性（即容器中子控件的屬性）
- oeder：控件排列順序坡脐，數(shù)值越小越靠前（可以有負(fù)數(shù)泄私，默認(rèn)值為0）
- flex-grow：控件的放大比例（默認(rèn)值為0，即表示如果存在剩余空間也不放大）
- flex-shrink：控件的收縮比例（默認(rèn)值為1）
- flex-basis：設(shè)置控件的基準(zhǔn)（其值為：整數(shù)px备闲，如200px晌端；默認(rèn)值為auto）
- flex：是flex-grow flex-shrink flex-basis這三個(gè)屬性的縮寫(xiě)，其中第二個(gè)和第三個(gè)參數(shù)為可選項(xiàng)（默認(rèn)值為 0 1 auto）
- align-self：控件自身在次軸上的對(duì)齊方式
- auto：默認(rèn)值
- flex-start：
- flex-end：
- center：
- baseline：
- stretch：拉伸恬砂，只有在寬（次軸為水平方向）高（次軸為垂直方向）沒(méi)有設(shè)置的情況下咧纠，才會(huì)有效
- React Native目前主要支持flexbox的6個(gè)屬性：
- alignItems：沿次軸方向的對(duì)齊方式（注：無(wú)baseline值，故其值為：flex-start | flex-end | center | stretch）
- alignSelf：控件自身在次軸上的對(duì)齊方式（注：同樣沒(méi)有baseline值泻骤，故：auto | flex-start | flex-end | center | stretch）
- flex：是flex-grow flex-shrink flex-basis這三個(gè)屬性的縮寫(xiě)漆羔，其中第二個(gè)和第三個(gè)參數(shù)為可選項(xiàng)（默認(rèn)值為 0 1 auto）
- flexDirection：指定主軸的方向（注：在這種情況下默認(rèn)值為column）
- flexWrap：
- justifyContent：
