今天剛學了css3的彈性盒模型，這是乙個可以讓你告別浮動、完美實現垂直水平居中的新特性。
flexbox是布局模組，而不是乙個簡單的屬性，它包含父元素和子元素的屬性。
flexbox布局的主體思想是似的元素可以改變大小以適應可用空間，當可用空間變大，flex元素將伸展大小以填充可用空間，當flex元素超出可用空間時將自動縮小。總之，flex元素是可以讓你的布局根據瀏覽器的大小變化進行自動伸縮。
flexbox布局首先需要建立乙個flex容器。為此給元素設定display屬性的值為flex。對於ie10來說，我們需要在開頭的地方新增-ms-flexbox。
.containerbox-orient定義分布的座標軸：vertical和horizional。這兩個值分別定義盒子垂直顯示和水平顯示：
.containerbox-orient: horizontal|vertical|inline-axis|block-axis|inherit;描述inline-axis（軸線）
沿著行內軸來排列子元素（即從左往右）。
block-axis
沿著塊軸來排列子元素（即從上往下）。
body元素包含了想要居中的標題元素，所以我們將他的display屬性值設定為「flex」：
bodyflexbox布局，而不是普通的塊布局。在文件流中的所有子元素（即不是絕對定位的元素）現在都變成了伸縮專案。
body
#box1
#box2
#box3123
還可以指定在解析了任何靈活長度和自動頁邊距之後，彈性容器的內容與主軸和橫軸（與主軸垂直）的對齊方式。你可以通過justify-content、align-items、align-self和align-content屬性調整此對齊方式。
使用justify-content屬性，可以設定在解析了任何靈活長度和自動頁邊距之後，彈性專案與彈性容器主軸的對齊方式。下圖顯示了justify-content的值以及這些值對彈性容器（含三個彈性專案）的影響。
justify-content：flex-start(預設值) 伸縮專案向一行的起始位置靠齊。
justify-content：flex-end 伸縮專案向一行的結束位置靠齊。
justify-content：center 伸縮專案向一行的中間位置靠齊。
justify-content：space-between 伸縮專案會平均地分布在行裡。第乙個伸縮專案一行中的最開始位置，最後乙個伸縮專案在一行中最終點位置。
justify-content：space-around 伸縮專案會平均地分布在行裡，兩端保留一半的空間。
align-items 側軸對齊（適用於伸縮容器，也就是伸縮專案的父元素）align-items是乙個和justify-content相呼應的屬性。align-items調整伸縮專案在側軸上的定位方式。可能的值有：
flex-start：伸縮專案在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
flex-end：伸縮專案在側軸終點邊的外邊距靠住該行在側軸終點的邊 。
center：伸縮專案的外邊距盒在該行的側軸上居中放置。
baseline：伸縮專案根據他們的基線對齊。
stretch（預設值）：伸縮專案拉伸填充整個伸縮容器。此值會使專案的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。
flex-wrap 伸縮行換行nowrap (預設)
wrap
wrap-reverse
align-content 堆疊伸縮行align-content會更改flex-wrap的行為。它和align-items相似，但是不是對齊伸縮專案，它對齊的是伸縮行。可能你已經想到了，它接受的值也很相似：
flex-start：各行向伸縮容器的起點位置堆疊。
flex-end：各行向伸縮容器的結束位置堆疊。
center：各行向伸縮容器的中間位置堆疊。
space-between：各行在伸縮容器中平均分布。
space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間。
stretch（預設值）：各行將會伸展以占用剩餘的空間。
align-self 側軸對齊align-self屬性會覆蓋該項目的伸縮容器的align-items屬性。它的值和align-items一樣：
stretch (預設)
flex-start
flex-end
center
baseline
box-direction屬性規定框元素的子元素以什麼方向來排列。
語法：
box-direction: normal|reverse|inherit;box-pack屬性規定當框大於子元素的尺寸，在何處放置子元素。
語法
box-pack: start|end|center|justify;
start ：所有子容器都分布在父容器的左側，右側留空
end ：所有子容器都分布在父容器的右側，左側留空
justify ：所有子容器平均分布（預設值）
center ：平均分配父容器剩餘的空間（能壓縮子容器的大小，並且有全域性居中的效果）
box-align屬性規定如何對齊框的子元素。
語法
box-align: start|end|center|baseline|stretch;
start ：子容器從父容器頂部開始排列
end ：子容器從父容器底部開始排列
center ：子容器橫向居中（有點奇怪）
baseline ：所有子容器沿同一基線排列（很難理解）
stretch ：所有子容器和父容器保持同一高度（預設值）
box-flex屬性規定框的子元素是否可伸縮其尺寸。
語法
box-flex: value;
與傳統的盒模型一樣，overflow屬性用來決定其顯示方式。為了避免溢位，你可以設定box-lines為multiple使其換行顯示。
flex: initialflex屬性值被設為initial的伸縮專案，在有剩餘空間的情況下不會有任何變化，但是在必要的情況下會被收縮。
flex: autoauto的伸縮專案，會根據主軸自動伸縮以占用所有剩餘空間。
auto目前僅在 opera 12.11 尚有效，在 chrome 23.0.1271.95 上無效。你可以通過使用 flex: 1; 來達到一樣的效果。
flex: noneflex屬性值被設為none的伸縮專案，在任何情況都不會發生伸縮。
先了解到這裡吧，之後的再深入學習便會陸續更新。不得不說css3的彈性盒模型為前端開發者帶來了福音，讓煩人的浮動見鬼去吧……
css3彈性盒模型詳解
1 理解display box,及其瀏覽器相容情況。為父元素新增display box 即為彈性盒模型。2 彈性盒模型各種屬性的運用。1 子元素的布局排列 box orient horizontal 子元素水平排列布局 vertical 子元素垂直排列布局 2 子元素的排列順序 box direct...
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...
CSS3彈性盒模型
一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...