屬性點梳理
按照國際慣例，真正理解屬性之前，我們首先需要知道項目存在哪些知識點。
> 容器內(nèi)部項目屬性
1）：order
容器內(nèi)子項目的前后排列順序。
2）：flex-grow
規(guī)定容器內(nèi)項目尺寸放大的比例。
3）：flex-shrink
規(guī)定容器內(nèi)項目尺寸縮小的比例。
4）：flex-basis
該屬性用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。
5）：flex
flex-grow、flex-shrink、flex-basis三個屬性的集合，類似于margin這樣的集合屬性。
6）：align-self
該屬性定義flex子項單獨在側(cè)軸（縱軸）方向上的對齊方式。
這些定義如果現(xiàn)在看不懂也不要緊，接下來的部分我將以圖文的方式詳細(xì)得來展現(xiàn)各個屬性的效果。
記憶和理解
好消息是這一塊的屬性，會涉及一些數(shù)學(xué)上的計算，那么1就是1,2就是2，會有助于我們進行理解。
order項目前后順序
order屬性只接受整數(shù)屬性值。越小item項目排列順序越靠前。
flex-grow項目尺寸放大比例
該屬性只支持int數(shù)值，默認(rèn)值為1，0和負(fù)數(shù)將不起作用。
單位1剩余空間：（容器主軸方向尺寸-(所有item項目的尺寸和)）/（所有item項目flex-grow相加的值）
那么在瀏覽器計算完成后，設(shè)置了該屬性的item項目尺寸將會變成，初始尺寸值+單位1剩余空間值*本item的flex-grow值。要是想清楚的看到效果，盡量不要設(shè)置尺寸為auto。
分析上圖案例：外層容器寬度350px，每一個文檔流項目寬度為100px，所以，那么第一行多出來350-300=50px，那么第一行單位1寬度為12.5px=50/（1+2+1），所以文檔流1號寬度將變成112.5px，2號將變成125px。那么分行也是這么進行計算。
flex-shrink項目尺寸縮小比例
類似于flex-grow屬性，單位1縮減空間計算值：（所有item項目尺寸和-容器尺寸）/（全部item flex-shrink 值的和）。
案例分析：flex容器主軸方向為水平左到右，寬度為200px，文檔流項目寬度都為200px，單位1縮小尺寸=400/(1+2+4)=57.14px，那么就會產(chǎn)生一個問題：3號項目應(yīng)該要縮小57.14*4=228.57px，這個時候如果3號項目沒有內(nèi)容，那么將不會進行展示，但是這個時候有內(nèi)容，就撐起內(nèi)容的寬度，導(dǎo)致出現(xiàn)計算上的偏差。
我的建議是：要想出現(xiàn)完美的縮小樣式，還希望不要把容器的主軸尺寸設(shè)置的太小，并且也不要把項目的flex-shrink設(shè)置的太大，一旦縮小值比項目自身的尺寸還要大，要么就不會進行展示，要么就按照內(nèi)部內(nèi)容進行支撐。
flex-basis項目伸縮基準(zhǔn)值
渲染項目主軸方向的尺寸之前，瀏覽器率先查看項目里面的basis屬性的值。
那么我們就盤點該屬性都有哪些可能的取值。
*1：auto
這個時候瀏覽器在計算布局的時候，先查看width或者是height，這個取決于主軸（flex-direction），是否有放大縮小的情況就取決于grow和shrink的屬性設(shè)置。
2：非負(fù)數(shù)百分比
項目的尺寸的計算已經(jīng)和本身的寬度和高度無關(guān)，那么初始尺寸就是flex容器尺寸flex-basis。
*3：非負(fù)數(shù)像素尺寸
項目的尺寸初始值就是basis的值，然后在判斷是否需要伸縮尺寸。
align-self 特立獨行
該屬性覆蓋了父容器中的align-items屬性值，一個不服從管教的孩子，大家都坐在一排，他卻偏要做到教師最后一排，就是這么有個性。
既然是自己給自己下命令，那么可能存在的屬性值就和align-items屬性相同。
總結(jié)
本篇介紹了item項目上的flex彈性盒子的屬性，東西不是很多，學(xué)習(xí)要點就是寫布局之前需要在腦海中多進行建模，和計算，不用很精細(xì)的去計算，只要達到效果就行，只要在誤差內(nèi)就是一種可行的方式。
