詳細介紹彈性盒模型（display：flex）

彈性盒模型，即Flexbox，是css3中的新特性，其實彈性盒模型的原身是dispaly：box；這裏，咱們暫時不考慮舊的，咱們只看新的。

爲容器指定彈性盒子，只需在父元素（也就是容器）中設置：display：flex；（注意，webkit內核的須要加webkit前綴，行內元素設置彈性盒子的話，設置display：inline-flex；並且，設置了彈性盒子，子元素的float，clear，vertical屬性都將失效）。

彈性盒子默認有兩條軸，橫軸和縱軸，默認橫軸爲主軸（默認自左向右）縱軸爲輔軸（默認自上而下）。設置了display：flex的容器（也就是父元素）的屬性有：flex-direction、flex-wrap，justify-content，flex-flow，align-items，align-content；

其中：flex-direction決定了主軸的方向，其值有：row（默認值，自左向右）/row-reverse（自右向左）/column（主軸爲垂直的，自上而下）/column-reverse（自下而上）。

flex-wrap定義一排容不下的時候是否換行，默認爲nowrap不換行（一行容不下時，各條目的寬度會按比例縮小）。wrap爲正常換行。wrap-reverse是換行時第一行跑到了下面，第二行跑到了上面（暫時還沒想好如何描述更清楚）。

flex-flow是flex-direction和flex-wrap的合併寫法。默認爲row nowrap。

justify-content定義了條目在主軸上的排列方式：有左對齊flex-start（默認值），右對齊flex-end，居中對齊center，兩端對齊space-between，等分space-around即每一個條目兩端的空隙相等。

align-item定義了條目在縱軸上的排列方式：有頂部對齊flex-start，底部對齊flex-end，居中對齊center，strecth（默認值，若是條目不設置具體數值的高度，則高度會沾滿整個父元素的高度），baseline，以條目裏的第一行文字的基線爲準。

align-content定義了多跟軸線時，條目的在縱軸的對齊方式，若是隻有一根主軸線則該屬性不起做用。值和justify-content的值是同樣的。

 

說完容器（也就是父元素）所擁有的屬性，該來講說容器中的條目（也就是子元素）所用有的屬性了，不能父親一手遮天，咱們崇尚自由民主，因此，父親有屬性，孩子也有屬性。

孩子的屬性都有：order，flex-grow，flex-shrink，flex-basis，（flex），align-self。

order定義了子元素出現的排列前後，值越小，排列越靠前，默認爲0。

flex-grow（看到grow咱們就應該聯想到變大）定義了子元素的放大比例，默認爲0，表示即便父元素還有剩餘空間也不放大該子元素。設父元素的寬度爲700px，三個子元素寬度分別爲200px，若是全部子元素的flex-grow的值爲1，則若是父元素有剩餘空間，子元素會等比例放大，即剩餘出來的100/3分給三個孩子；若是是一個子元素flex-grow爲1，一個爲2，第三個爲3，則三個子元素分別多分到，100*（1/6），100*（2/6），100*（3/6）。

flex-shrink（看到shrink，咱們就贏聯想到變小）定義了子元素的縮小比例，默認爲1，當容器空間不足時，若是各個條目的flex-shrink值均爲1，則代表等比例縮小，若是爲0，則表示不縮小。

剩餘的幾個條目屬性咱們稍後再說。。