彈性盒模型，即flexbox，是css3中的新特性，其實彈性盒模型的原身是dispaly：box。為容器指定彈性盒子，只需在父元素（即容器）中設定：display：flex。
彈性盒子有兩條軸：橫軸和縱軸，預設橫軸（自左向右）為主軸，縱軸預設自上而下為輔軸。
設定了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為正常換行。
justify-content：定義了條目在主軸上的排列方式：有左對齊flex-start（預設值），右對齊flex-end，居中對齊center，兩端對齊space-between，等分space-around即每個條目兩端的空隙相等。
flex-flow：flex-direction和flex-wrap的合併寫法，預設為row nowrap。
align-item：定義了條目在縱軸上的排列方式，有頂部對齊flex-start，底部對齊flex-end，居中對齊center，strecth（預設值，如果條目不設定具體數值，則高度會佔滿整個父元素的高度），baseline以條目裡的第一行文字的基線為準。
align-content：定義了多跟軸線時，條目在縱軸的對齊方式；如果只有一根主軸線則該屬性不起作用，值和justify-content的值是一樣的。
彈性盒子模型屬性之flex shrink
上一次,我們已經了解過flex grow的具體用法後,這周,讓我們一起來見一下flex basis這個屬性.flex shrink 定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。當專案1...
彈性盒子模型屬性之flex grow
在學習彈性盒子模型的時候,有幾個屬性常常讓同學們感覺頭痛,不知到最後得到的效果數值到底是怎樣計算得來的,那麼不要慌,穩住,我們能贏 今天就讓我們先來看看flex grow這個屬性 flex grow 定義專案的放大比例，預設值為0，就算存在剩餘空間，也不會放大。下面的例子中沒有定義該屬性，是不會擁有...
CSS3 彈性盒子模型
lang en charset utf 8 標題title rel stylesheet href css reset.css type text css box zxw style head class box class zxw zxw1li class zxw zxw2li class zxw...