首先講一下什麼是彈性盒：
彈性盒布局模型（flexible box layout）是 css3 規範中提出的一種新的布局方式，
彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的條目進行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會根據布局的需要，調整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。當容器的尺寸由於螢幕大小或視窗尺寸發生變化時，其中包含的條目也會被動態地調整。比如當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。
說的簡單點就是具有自適應的布局稱為彈性盒布局。
那麼如何進行布局呢？首先我們需要在父元素上加 display:box(老版本)或者display:flex(新版本).. 然後我們給每個子元素設定 box-flex:1;這樣每個子元素就均分了父元素的寬度；當然你如果給某個子元素設定 box-flex:2；那他所佔比例就大一點；另外要注意點，在使用彈性盒布局時，你也可以給子元素設定具體寬度，那麼其他子元素就會用剩下的寬度進行布局；
彈性盒預設是水平布局的，可萬一我們需要垂直布局怎麼辦呢，那就需要在父元素上加 box-orient:vertical;此外我們還可設定盒子的排列順序 box-direction:reverse(逆序)。
再說一點，由於是具體寬度和彈性盒子一起布局，可能會出現父元素空間多餘的情況，這個時候還可利用box-align 和 box-pack來進行樣式改變.
然後講一下怪異盒：
根據我自己的理解，怪異盒子就是和我們標準盒子模型相反的，
盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子
總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
要使用怪異盒子首先得給父元素加 box-sizing:border-box;然後你就可以盡情使用它了，不用計算子元素的寬高，因為他的margin，border 都在自己裡面。
注：以上都存在相容性問題，需要在屬性前面加上
-webkit(谷歌相容) 或者-moz(火狐相容)
CSS3與彈性盒布局
在規定彈性盒子之中的子級元素換行顯示之前父級元素必須是彈性盒子模型，也就是設定 display 為 flex 如下 結果 flex wrap wrap 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行。結果 從上面的結果來看雖然子元素換行顯示了但是布局效果並不是很好，好的...
css3移動端布局 怪異盒模型和彈性盒模型
一 怪異盒模型 1 box sizing 屬性值 box sizing content box 常規盒模型 box sizing border box 怪異盒模型 ie盒模型 2 觸發怪異盒模型 box sizing border box 3 怪異盒模型特點 padding和border都會在元素的...
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...