1.彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
2.css3 彈性盒子內容
彈性容器(flex container)
彈性子元素(flex item)
用法：彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
3.修改排列方式
如果我們設定 direction 屬性為 rtl (right-to-left),彈性子元素的排列方式也會改變，頁面布局也跟著改變
flex-direction 順序指定了彈性子元素在父容器中的位置。
語法：flex-direction: row | row-reverse | column | column-reverse
justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 屬性
align-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 屬性
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
語法flex-flow:nowrap
nowrap - 預設， 彈性容器為單行。該情況下彈性子項可能會溢位容器。
wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
align-content 屬性
align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。
語法align-content: flex-start | flex-end | center | space-between | space-around | stretch
ccs**優化：
#myaccount .consume-load
/* 彈性子元素(flex item) 1 */
#myaccount .consume-load .ui-inputwrap
#myaccount .consume-load input
/* 彈性子元素(flex item) 2 */
#myaccount .consume-load button
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 與當前的寫模式相同，例如 中...
Css3彈性盒模型
css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...