彈性布局分為兩部分：
1. 語法是新增到父容器上的
display : flex; 想要做彈性布局一定要寫這句話
flex-direction : 布局的排列方向 （主軸排列方向）
row 預設值，顯示為行。方向為當前文件流水平方向，預設情況下是從左往右
row-reverse 顯示為行。但方向和row屬性值是反的
column 顯示為列。方向是從上往下
column-reverse 顯示為列。但方向和column屬性值是反的
flex-wrap : 是否進行換行處理
nowrap; 預設值，不換行處理
wrap; 換行處理
wrap-reverse; 反向換行
flex-flow : 是flex-direction和flex-wrap的縮寫，表示flex布局的flow流動特性。第乙個值表示方向，第二個值表示換行，中間用空格隔開。
flex-flow : flex-direction flex-wrap 復合寫法 (是有順序的)。
justify-content : 屬性決定了主軸方向上子項的對齊和分布方式
flex-start ： 子項都去起始位置對齊
flex-end ： 子項都去結束位置對齊
center ： 子項都去中心位置對齊
space-between : 表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
space-around : around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半
space-evenly : evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等
align-items : 每一行中的子元素上下對齊方式
flex-start： 去起始位置對齊
center： 去中心位置對齊
flex-end 去結束位置對齊
align-content : 跟justify-content相反的操作。側軸的對齊方式。(最少需要兩行才能看出效果，因為他是多行的乙個上下對齊方式)。多行下，有幾行就會把容器劃分為幾部分，預設就是stretch拉伸的。值跟justify-content取值是相同的。
2. 語法是新增到子容器上的
order : 排序 。可以通過設定order改變某乙個flex子項的排序位置。預設order屬性值是0，值越大排的越靠後，可以為負數
flex-grow : 擴充套件 ( 想看到擴充套件的效果，必須有空隙 )
0 : 預設值 , 不去擴充套件
1 : 去擴充套件 , 會把空白區域全部沾滿
子元素會按照設定的比例值來分配空隙，如果比例值總和小於1，那麼會有空隙，如果比例值總和大於等於1，那麼就沒有空隙。
flex-shrink : 收縮
正常預設值是1
0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正常縮放1進行比較的）
flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是設定乙個比例值，flex-basis是設定乙個具體值。
flex : 一種復合寫法
flex-grow flex-shrink flex-basis
algin-self: 跟align-items操作很像，區別就是只是針對某乙個子項。
注意：預設情況下，在彈性盒子中的子元素的左右排列的。
水平是主軸的時候：預設情況下，當寬高不寫的時候，寬度由內容決定，高度由父容器決定。
垂直是主軸的時候：預設情況下，當寬高不寫的時候，寬度由父容器決定，高度由內容決定。
當子項的總寬度大於父容器的時候，會自動收縮的（彈性的優先順序是大於自身固定大小的）
當子項的內容已經達到了父容器最小寬高的時候，就會出現溢位的現象。
其中使用用的頻率比較多的語法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
（逆戰班）這些語法的使用例項：
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...
Css3響應布局 彈性盒子
彈性盒子 flexbox 組成 彈性容器 flex container 和彈性子元素 flex item 1 彈性容器 flex container display flex inline flex 內部包含乙個或多個彈性子元素 注意 設定為彈性容器後，子元素的float clear vertica...
css3彈性盒子（flex布局）
寫在容器上 容器屬性 flex direction 定義內部的排列方向 確定主軸 值 1 row 預設，水平方向，從左到右 2 row reverse 水平方向，從右到左 3 column 顯示為列，垂直方向 從上到下 4 column reverse 顯示為列，垂直方向 從下到上 justify ...