彈性布局為盒模型提供了很多常見場景的解決方案源武，比如居中在塔，左右排列。
理解彈性布局左敌，首先要明確彈性布局中重要的兩根坐標軸：主軸和交叉軸逸雹，默認是水平排列营搅，因此默認的主軸是水平軸云挟，交叉軸式垂直軸。每個軸都有它的起點和終點转质，每一項都要在主軸上和交叉軸上分別占據(jù)空間园欣。
Flex布局的屬性分為容器屬性和項目屬性。
容器屬性
flex-direction
主軸上的項目排列方向休蟹，默認值row
-
flex-direction: row
-
flex-direction: column
-
flex-direction: row-reverse
-
flex-direction: column-reverse
flex-wrap
默認情況下沸枯，所有的項目都會水平或者默認排列在主軸上，如果排列不下赂弓，默認滾動绑榴，flex-wrap定義了在主軸排列不下時，項目如何排列盈魁， 默認nowrap
-
flex-wrap: wrap
換行翔怎，第一行在上方
-
flex-wrap: nowrap
不換行
-
flex-wrap: wrap-reverse
換行，第一行在下方
flex-flow
flex-flow是flex-direction+flex-wrap, flex-flow: <flex-direction> || <flex-wrap>;
justify-content
定義了項目整體在主軸上的對齊方式杨耙，默認值為flex-start
-
justify-content: center
-
justify-content: flex-start
-
justify-content: flex-end
-
justify-content: space-around
-
justify-content: space-between
-
justify-content: space-evenly
align-items
定義每一行在交叉軸上的對齊方式赤套，默認值為stretch
-
align-items: stretch
-
align-items: flex-start
-
align-items: flex-end
-
align-items: center
-
`align-items: baseline
每一行項目的第一行文字的基線對齊·
align-content
定義項目整體在交叉軸上的對齊方式，默認值為flex-start
-
align-content: flex-start
-
align-content: flex-end
-
align-content: center
-
align-content: stretch
-
align-content: space-around
-
align-content: space-between
-
align-content: space-evenly
項目屬性
order
數(shù)值越小珊膜，排列越靠前于毙，默認值為0，假設將第五個元素order設為1辅搬，其在整體的項目（非單行）排列中變成最后一個。
flex-grow
當存在剩余空間時脖旱，項目的放大比例堪遂，默認為0，即即使存在剩余空間萌庆，也不放大溶褪。如果將第一個元素的flex-grow設為0.1，意味著假設存在剩余空間践险，它在主軸上的尺寸將設置為1.1倍和剩余空間的最小值猿妈。如果所有項目的flex-grow一致，將平等分配剩余空間巍虫，若其余項目均為1彭则，某一個是2，那么他分配的剩余空間將是其余的兩倍（不會優(yōu)先保證自身尺寸的兩倍）
flex-shrink
定義了空間不足時占遥，項目的縮小比例俯抖，默認值為1
當空間充足時，可以看出瓦胎，每個項目的寬度大致為200px芬萍。
當空間嚴重不足時尤揣，可以看出，每個項目的最小寬度為100px柬祠。
因此
flex-shrink默認值1意味著北戏，當空間不足時，最多壓縮一倍的尺寸漫蛔。當所有的項目flex-shrink值相同時且大于0嗜愈，空間不足，大家等比例縮谐兔ā芝硬；如果所有的項目flex-shrink都為0，空間不足時轧房，大家都不縮邪枰酢；如果只有一個為0奶镶，其他都大于零迟赃，那么只有為0的不縮小厂镇；小于零無效纤壁。
flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間捺信。瀏覽器根據(jù)這個屬性酌媒，計算主軸是否有多余空間。它的默認值為auto迄靠，即項目的本來大小秒咨。
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式掌挚，可覆蓋align-items屬性雨席。默認值為auto，表示繼承父元素的align-items屬性吠式，如果沒有父元素陡厘，則等同于stretch。
-
flex-start
-
flex-end
