指定乙個容器的 display 屬性為 flex（彈性布局）
inline-flex（為行內元素設定）、-webkit-flex（為 webkit 核心瀏覽器元素設定）
注意：設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
屬性包括：1）flex 容器屬性；2）flex 專案屬性（包含在容器中）；
flex 容器屬性：
a. flex-direction：（決定專案的排列方向）— row | row-reverse | column | column-reverse（水平從左到右 | 水平反向 | 垂直 | 垂直反向）
b. flex-wrap（預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行）
nowrap | wrap | wrap-reverse; （預設：不換行）、（換行）、（換行，第一行在下方）
ab. flex-flow（是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap）
flex-flow: ||
c. justify-content（定義了專案（item）在主軸上的對齊方式。）水平對齊
flex-start | flex-end | center | space-between | space-around （預設值：左對齊、右對齊、居中、兩端對齊，專案之間的間隔都相等、每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍）
d. align-content（定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。可以使用justify-content）
flex-start | flex-end | center | space-between | space-around | stretch（stretch（預設值）：軸線佔滿整個交叉軸；——其它的和 justify-content 一樣）
e. align-item（定義專案在交叉軸上如何對齊）垂直對齊
align-items: flex-start | flex-end | center | baseline | stretch（stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。 | baseline: 專案的第一行文字的基線對齊）
flex 專案屬性
a. order（定義專案的排列順序。數值越小，排列越靠前，預設為0）— order:
b. flex-grow（定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大）
flex-grow: 所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
c. flex-shrink（定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小）— flex-shrink: 設定為 0 不縮小
d. flex-basis（定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。）— flex-basis: | auto （不是放大和縮小，是設定固定值）
bcd. flex（是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。）
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
e. align-self（允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。）
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...
css3新增的彈性盒子模型
box align start end center baseline stretch start 定義每個子元素沿盒子的上邊緣排列，餘下的空間位於底部 end 定義每個子元素沿盒子的下邊緣排列，餘下的空間位於頂部 center 定義可用空間平均分配，上面一半，下面一半 baseline 定義子元素...
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...