css3大力推出的flex盒模型，應該是現在布局世界中的一大神器，各種屬性使用和介紹比比皆是，然而css本身就是乙個相互作用和影響的世界，彈性盒子也一樣。
最近利用flex盒子布局時，偶遇一些怪異現象，比如flex-shrink無效，align-item失效等等，決定好好研究一下這些屬性之間的相互作用和影響，以後能夠準確的使用。
說明：1. 本文是一篇研究結**章，沒有例項（主要是各種屬性穿插測試的太多了，如果分解，則會出現太多累贅**，再者作者有些懶惰了n(*≧▽≦*)n），所以力求簡單明瞭的把結論敘述清楚，讓大家明白；
2. 本文敘述以橫向布局為例，因此都是寬度概念為主，縱向時，即換成高度概念，結論適用。
flex盒模型的父元素可能存在以下大坑：
align-content和align-item屬性：
1. 單一主線時, 是align-item的天下，縱向位置先由它統一說了算（「先」的意思是，它的小弟——子元素的align-self可能會覆蓋它），align-content是無效的；
2. 多條主線時，即出現flex-wrap:wrap或flex-flow: wrap [row,column]屬性時，如果依然只有align-item，則還是它說了算；但是如果出現了align-content，則一切掌控皆由align-content負責，align-item大權盡失！！除非align-content的值為stretch(預設值)，此時等同於沒有設定align-content，則align-item生效；
3.當align-content生效時，子元素的align-self是無效的，因為它覆蓋的是align-item，而此時這個大哥是失寵的，大哥都失寵了，小弟又能如何。同理，除非align-content為stretch(預設值)，它們倆才能恢復往日風範。
子元素屬性可能有以下好幾個大坑：
1.flex-grow屬性：預設是0，子元素在剩餘空間中都不拉伸，當出現非0值時開始拉伸；其中，當所有子元素共用同乙個數值，則表現為等分，如果有乙個值不同，則拉伸幅度為當前子元素flex-grow值除以共同值的倍數：如共同值為5，當前值為1，則表現為其他子元素的1/5寬度拉伸；為15時，表現為其他子元素的3倍寬度拉伸；當多個值都不同時，則表現為與最大數值的倍數比，計算方式同上；如果有非"auto"值的顯式寬度width屬性設定，則寬度會成為主導因素（例外：如果所有子元素寬度值相同，則此時相當於沒有設定寬度，計算仍以flex-grow值為主）。
2.flex-shrink屬性：必須有顯式的非「auto」寬度設定才生效，預設是1，即寬度不夠時自動縮放（這也是為什麼通常情況下，無論怎麼設定寬度，子元素都不會溢位，而且佔滿容器時寬度值將不再起作用的原因）。實際效果中，當子元素寬度超過父元素平均分配值時，子元素會隨shrink值擴大或縮小，以下稱之為「寬度搶占」；如果有子元素的flex-shrink值為0時，即不縮放，則當該元素寬度超過100%時，會將其他元素擠出父元素之外，發生溢位，原因就是此時元素不再被縮放；由於測試中資料變化暫未發現規律，因此只能定性出以下結論：shrink值設定越大的，在「寬度搶占」中越吃虧，即會被縮小，即使兩個子元素寬度都一樣，但是shrink值小的仍會佔據更多寬度空間，而當發生「寬度搶占」情況時，flex-grow的值將失去作用（原因是此時已經沒有剩餘空間可分配，拉伸擴充套件無從談起），一切顯示只由shrink和寬度值來共同決定；當shrink值都一樣（非0值），則等比例縮放。
3.flex-grow和flex-shrink設定負值無效，在父元素flex-wrap屬性為「nowrap」或者是「wrap」時無顯式寬度設定或者寬度為「auto」時作用顯著；一旦在「wrap」情況下設定了寬度，當某乙個或幾個子元素寬度超出100%，會發生換行，則上述兩個屬性作用將會被削弱，此時寬度主導布局。
4.flex-basis屬性：這個屬性設定會干擾flex-shrink和flex-grow的正常表現，定義中這個屬性是在空間剩餘的情況下，優先給予子元素設定的空間數值，該元素在不同方向的彈性布局中可以近似理解為寬或者高，即可以設定具體px數值，百分比等，預設auto。一旦子元素設定了這個屬性的具體值，那麼在flex-grow作用時，會給當前子元素再自動擴充套件乙個近似flex-basis數值的寬度（空間不足時瀏覽器會自動計算），即在擴張地盤時多獲得一塊flex-basis大小的地盤；而在flex-shrink作用時，將會把當前子元素的寬度設定為近似flex-basis的數值，即固定住了地盤，無論子元素的shrink值有多小，你都無法打贏「寬度搶占」的戰役，或者說，是沒有資格參與這場戰役！不過，一般很少用到這個屬性。
5.align-self屬性的坑已經在父元素屬性中順帶填平了，大家可以回顧一下。
不得不說css是相互作用，相互影響，綜合表現的典型代表，各項屬性之間雖沒有邏輯性的聯絡，但是卻有實際中的影響，這也是css複雜的乙個原因，所以要用好css，發揮強大的功能，還是需要不斷探索和研究的。
CSS3 flex 伸縮布局盒模型
css3引入一種新的布局模式 flexbox布局 1.優點 flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，可以調節伸縮專案的相對大小和位置。非常適用於排列方向改變，縮放與收縮用的比較多的專案。2.基本概念 由於flexbox並不只是個屬性，而是乙個模組，會有好多屬性，以及重要的名...
CSS3 Flex 彈性模型布局用法
檢視 css某個屬性，相容情況 css3 flex布局 盒子模型 box sizing border box 預設 content box 平時普通盒子模型，padding，border，盒子會變大,向外擴充套件 border box 盒子模型，padding,border,盒子模型不變大,向內擴充...
CSS3 Flex布局（容器）
item1 item2 item3 item4 item5 flex flow屬性是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap。justify content屬性定義了專案在主軸上的對齊方式。align items屬性定義專案在交叉軸上如何對齊。...