????彈性布局對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性在響應式開發(fā)中可以發(fā)揮極大的作用。
主軸：Flex容器的主軸主要用來配置flex項目，默認是水平方向。
側軸：與主軸垂直的軸稱為側軸，默認是垂直方向的。
方向：默認主軸從左向右，側軸默認從上到下。
主軸和側軸并不是固定不變的，通過設置flex-direction可以互換。
容器的屬性
? flex-direction
決定主軸方向
? flex-wrap
如果一條軸線排不下，如何換行
nowrap（默認）:不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方
? flex-flow
是flex-direction和flex-wrap屬性的簡寫形式
? justify-content
對齊方式
? align-items
設置交叉軸如何對齊
? align-content
多根軸線的對齊方式
看圖說話，以行為單位，不看行內(nèi)元素，看各行
元素的屬性
? order
設置元素的排列順序，數(shù)值越小，排列越靠前，默認為0
? flex-grow
定義元素的放大比例，默認為0，即如果存在剩余空間，也不放大
? flex-shrink
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。
? flex-basis
在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
? flex
flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto
通過設置flex的數(shù)值來實現(xiàn)對元素之間幾等分的設置，一個盒子里面可以有子元素不設置這個屬性，可以設置固定寬度，這樣剩下的盒子就把剩余寬度按照幾等分來進行劃分
? align-self
允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
