彈性盒子(flexible box)是css3中盒子模型的彈性布局，在傳統的布局方式上增加了很多靈活性。
在父盒子上定義display屬性：
#box#box在研究具體屬性前，先建立乙個基本模板，必要時修改一下部分引數：
12
345#flex-box
.flex-item
#flex-box.box.box.box
/* value flex-start 左對齊(預設)*/
/* value flex-end：右對齊*/
/* value center： 居中*/
/* value space-between：兩端對齊，專案之間的間隔都相等*/
/* value space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍*/
.box
/* value flex-start 交叉軸的起點對齊*/
/* value flex-end 交叉軸的終點對齊*/
/* value center 交叉軸的中點對齊*/
/* value baseline 專案的第一行文字的基線對齊*/
/* value stretch 如果專案未設定高度或設為auto，將佔滿整個容器的高度(預設)*/
.box
/* value flex-start 與交叉軸的起點對齊*/
/* value flex-end 與交叉軸的終點對齊*/
/* value center 與交叉軸的中點對齊*/
/* value space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布*/
/* value space-around 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍*/
/* value stretch 軸線佔滿整個交叉軸(預設值)*/
11
1111
1111
11222
222 333
3 444
66 8
4 12
i am header!
i am body!
i am footer!
CSS3多列布局
最近買了基本書，因為在實習的時候用到很多css動畫，給任務的時候，也會讓布局一些設計頁面。在做的過程中，覺著自己的css功底還是不行，所以就想再多積累多學習。今天主要看的是大漠的 css3 看知乎上和很多人的技術部落格裡都推薦過。今天先說css3的多列布局。平時用到的比較多的是兩欄布局，三欄布局。方...
CSS3多列布局
css3多列布局可以自動將內容按指定的列數排列，它實現了和報紙 雜誌排版非常相似的布局效果。一 css3多列布局核心屬性 1 columns 整合column width和column count兩個屬性。2 column width 定義每列列寬度 3 column count 定義分列列數 4 ...
CSS3多列布局
在本章中，您將學習如下多列屬性 屬性 瀏覽器支援 column count column gap column rule internet explorer 10 和 opera 支援多列屬性。firefox 需要字首 moz chrome 和 safari 需要字首 webkit 注釋 inter...