1.父元素設定
/* safari, opera, and chrome */
display:-webkit-box;
/* firefox */
display:-moz-box;
/* w3c */
display:box
2.box-orient 定義盒模型的布局方向 horizontal 水平顯示 vertical 垂直顯示
3.box-direction 元素排列順序 normal 正常 reverse 反序
4.box-ordinal-group 屬性規定框中子元素的顯示次序,
值更低的元素會顯示在值更高的元素前面顯示。
5.box-flex 定義盒子的彈性空間 子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值得和
6.box-pack:對盒子富裕的空間進行管理
start 所有子元素在盒子左側顯示，富裕空間在右側
end 所有子元素在盒子右側顯示，富裕空間在左側
center 所有子元素居中
justify 富裕空間在子元素之間平均分布
7.box-align 在垂直方向上對元素的位置進行管理
start:所有子元素在據頂
end 所有子元素在據底
center 所有子元素居中
8.新增屬性
陰影：box-shadow:[inset] x y blur [spread] color;
inset:投影方式 inset:內投影 不給：外投影
x、y 陰影偏移
blur:模糊半徑
spread 擴充套件陰影半徑 先擴充套件原有形狀，再開始畫陰影
color:陰影顏色
box-reflect 倒影 -webkit-支援 direction方向 above/below/left/right
resize 自由縮放 both/horizontal vertical(與overflow：auto一塊使用只有水平方向可以縮放)
box-sizing 和模型解析模式 content-box 標準盒模型：width/height=border+padding+content border-box 怪異盒模型 width/height=content
彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為flex布局。
.行內元素也可以使用flex布局。box
.webkit核心的瀏覽器，必須加上-webkit字首。box
.注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。box
採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
display:
-webkit-flex
;display:
flex
;flex-direction順序指定了彈性子元素在父容器中的位置。
flex-direction
:row
|row
-reverse
|column
|column
-reverse
flex-direction的值有:
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify各個值解析:-content
:flex
-start
|flex
-end
|center
|space
-between
|space
-around
效果圖展示：
align-items設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
align各個值解析:-items
:flex
-start
|flex
-end
|center
|baseline
|stretch
flex-wrap屬性用於指定彈性盒子的子元素換行方式。
flex各個值解析:-flow:||
align-content屬性用於修改flex-wrap屬性的行為。類似於align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。
align各個值解析:-content
:flex
-start
|flex
-end
|center
|space
-between
|space
-around
|stretch
order各個值解析::
align-self屬性用於設定彈性元素自身在側軸（縱軸）方向上的對齊方式。
align各個值解析:-self
:auto
|flex
-start
|flex
-end
|center
|baseline
|stretch
flex屬性用於指定彈性子元素如何分配空間。
flex各個值解析:：none |[
flex
-grow ]||
[flex
-shrink ]||
[flex
-basis
]
深入理解盒模型
寬度width被定義為從左內邊界到右內邊界的距離，高度height被定義為從上內邊界到下內邊界的距離 注意 寬度和高度無法應用到行內非替換元素，且不能為負 width height 值 auto inherit 初始值 auto 應用於 塊級元素和替換元素 繼承性 無 百分數 相對於包含塊的widt...
深入理解CSS盒模型
一 css盒子模型概念 盒模型的組成大家肯定都懂，由里向外content,padding,border,margin.盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。從上面兩圖不難看出在標準模型中，盒模型的寬高只是內容 content 的寬高，而在ie模型中盒模型的寬高是內容 content ...
深入理解 CSS3 彈性盒布局模型
彈性盒布局模型 flexible box layout 是 css3 規範中提出的一種新的布局方式。該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局 對齊和分配空間。這種布局方式在條目尺寸未知或動態時也能工作。這種布局方式已經被主流瀏覽器所支援，可以在 web 應用開發中使用。本文詳...