CSS3 在佈局方面做了非常大的改進，對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開發中可以發揮極大的作用。（相容性不好）

必要元素：

       指定一個盒子為伸縮盒子,等於開啟彈性佈局給該盒子設定 display:flex; 

　　設定屬性來調整此盒子的子元素的佈局方式：如 flex-direction；

　　明確主側軸及方向

　　可互換主側軸，也可改變方向

各屬性：

設定主軸方向

a)  flex-direction：row（預設屬性）

1. row：從左往右

b)  flex-direction：row-reverse

1. row-reverse從右向左排列

c)  flex-direction：column

1. 豎直反向，從上往下

d)  flex-direction：column-reverse

　　1.  豎直方向，從下往上

主軸的對齊方式

a)  justify-content：flex-start；

1. 從主軸開始的方向對齊

b)  justify-content：flex-end

1. 從主軸結束的方向對齊

c)  justify-content：center

1. 居中對齊（水平/豎直）

d)  justify-content：space-around

1. 平分父盒子空間

e)  justify-content：space-between

　　1.  兩端對齊，中間平分
 

側軸對齊方式

a)  align-items：flex-start

1. 從側軸開始的方向對齊

b)  align-items：flex-end

1. 從側軸結束的方向對齊

c)  align-items：center

1. 在側軸方向上居中

d)  align-items：baseline

1. 基線對齊，與flex-start等效

e)  align-items：stretch

1. 拉伸，和父盒子高度一樣
2. 有高度不會被拉伸

伸縮比例

a)  flex：number

b)  不設定就不參與平分

元素換行

a)      flex-wrap:wrap;  換行，控制伸縮盒子裡面的元素

b)      flex-wrap：nowrap； 預設不換行 會自動縮減寬度

控制 換行 堆疊的元素

a)      align-content: flex-start

　　　　起始點對齊 各行向彈性盒容器的起始位置堆疊

b)      align-content: flex-end;

　　　　終止點對齊 將結尾鋪滿 開頭空著

c)       align-content: center ;

 　　　  居中對齊，各個盒子向彈性盒容器的中間位置堆疊／y軸中間

d)      align-contnt: space-around;

            四周環繞：各行在彈性盒容器中平均分佈

e)      align-content: space-between;

            頂端和底部對齊，中間部分為空

f)       align-content:  stretch ;

    　 　 拉伸   高度會自適應

 align-self;   覆蓋父元素設定的align-items

　　　　　　     align-self: stretch

flex-start      ／    flex-end  ／ center     ／ stretch

   側軸起始點對齊／終止點對齊／居中對齊／拉伸