display：flex| inline-flex
flex：將物件作為彈性伸縮盒顯示-------即讓子元素left排列了又解決父元素高度塌陷了
inline-flex：將物件作為內聯塊級彈性伸縮盒顯示------父元素的寬高就是子元素的寬高
flex-direction：row | row-reverse | column | column-reverse
row：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
語法：flex-wrap：nowrap | wrap | wrap-reverse
nowrap：當子元素溢位父容器時不換行，自行改變子元素的寬度
wrap：當子元素溢位父容器時自動換行。
wrap-reverse：反轉wrap排列
語法：justify-content：flex-start | flex-end | center | space-between | space-around
flex-start：彈性盒子元素從行起始位置對齊
flex-end：彈性盒子元素從行結束位置對齊
center：彈性盒子元素從行中間 位置對齊
space-between：彈性盒子元素平均分布在行裡
space-around：彈性盒子元素平均分布在行裡，兩端保留子元素於子元素之間間距的一半
語法：align-items: flex-start | flex-end | center | baseline |stretch
flex-start:子元素的起始位置靠近彈性盒的側軸的起始位置
flex-end:子元素的起始位置靠近彈性盒的側軸的結束位置
center：分布在側軸上居中的位置
baseline：將文字對齊
stretch：即預設狀態。如果子元素未設定寬高，將子元素預設拉伸為父元素的高度
語法：align-content: flex-start | flex-end | center | space-between | space-around |stretch
flex-start:各行向彈性盒的起始位置堆疊
flex-end:各行向彈性盒的結束位置開始堆疊
center：各行向彈性盒的中間位置開始堆疊
space-between：各行在彈性盒容器中平均分布
space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距的一半
stretch：即預設狀態。各行將會伸展以占用剩餘空間
語法：flex-grow:
(default 0)
;:用數值來定義擴充套件比率，不允許負值
預設值為0，不會擁有分配剩餘空間的權利
語法：flex-shrink：
(default 1)
flex-shrink：預設值為1，如果沒有顯示定義，將獲自動按照預設值1在所有因子相加之後計算比率來進行空間收縮
（按照加權值進行縮減）
語法：flex-basis：
| auto(default auto)
auto：無特定寬度值，取決於其他屬性值
：用長度值來定義寬度。不允許負值
：用百分比定義寬度，不允許負值。
flex：復合屬性，用於合併指定 flex-grow，flwx-shrink，flex-basis屬性
預設值：0 1 auto，如果縮寫flex：1，則其計算值為1 1 0，auto等價於1 1 auto，none等價於0 0 auto
語法：order：
integer可以是正數負數和零
語法：align-self：auto | flex-start | flex-end | center | baseline | stretch
auto：如果「align-self」的值為auto，則其計算值為元素父元素的「align-items」值，如果沒有父元素，則其計算值為「stretch」
flex-start：彈性盒子元素的側軸起始位置的邊界緊緊靠住該行的側軸的起始邊界
flex-end：彈性盒子元素的側軸起始位置的邊界緊緊靠住該行的側軸的結束邊界
center：彈性盒子元素位於該行的側軸居中位置
baseline：如果彈性盒子元素的 行內側軸於側軸為同一條，則該值於「flex-start」等效，其他情況下，該值將參與基線對齊
stretch：如果指定側軸大小的屬性值為「auto」，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照「min/max-width/height」屬性的限制
html,body
body
.header
.main
.footer
.left
.center
.right
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...
css3彈性盒子布局
彈性布局分為兩部分 1.語法是新增到父容器上的 display flex 想要做彈性布局一定要寫這句話 flex direction 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件流水平方向，預設情況下是從左往右 row reverse 顯示為行。但方向和row屬性值是反的 ...
Css3響應布局 彈性盒子
彈性盒子 flexbox 組成 彈性容器 flex container 和彈性子元素 flex item 1 彈性容器 flex container display flex inline flex 內部包含乙個或多個彈性子元素 注意 設定為彈性容器後，子元素的float clear vertica...