彈性盒子（flex）

1.語法：display：flex（定義當前元素為彈性盒子）

①彈性盒子是一種佈局方式

②特點：改變子元素在父元素的排列方式

採用flex佈局的元素可以叫做flex的容器，他的子元素也會自動成為容器，也叫作flex項，通俗點來說在flex佈局中，行級元素不用轉換為塊級元素，也可以擁有塊級元素的屬性。

2.彈性盒子的方向：
彈性盒子的軸方向與我們日常學過的座標軸類似，只不過主軸方向與x軸相同而交叉軸方向與座標軸中y軸相反，當然這只是系統給出的預設值，我們還可以通過程式碼來實現改變彈性盒子的主軸方向：

**語法：**flex-direction：主軸方向
例子1.flex-direction:row;水平正向（也是主軸方向的預設值）如圖

需要注意的時x軸方向改變不會影響交叉軸方向的改變

3.flex-direction：colum 垂直向下（交叉軸預設值）
4.flex-direction:colum-reverse 垂直反向（箭頭指著上方）
定義內部彈性盒子是否換行
flex-wrap：nowrap 不進行換行（預設值)
內部元素呆在一行
flex-wrap：wrap 換行
內部元素自動換行

彈性盒子主軸的對齊方式
語法：justify-content：屬性值；

①justify-content：flex-start 表示軸的開始方向對齊（預設值）

②justify-content：flex-end 表示軸的結束方向對齊
元素靠右對齊

③justify-content：flex-center表示居中對齊

④justify-content：flex-between表示元素兩端對齊

⑤justify：space-around；兩個元素的間隔時元素與邊框距離的2倍

元素在交叉軸的對齊方式
語法：align-items：屬性值；
①align-items：flex-start；交叉軸開始方向（預設值）
②align-items：flex-end；交叉軸結束方向
③align-items：flex-center；居中對齊

這三種對齊方式與主軸雷同，大家可以手動去試一試，接下來還有一個補充的對齊方式：
align-items:baseline(基線對齊)元素基線對齊。

補充一個彈性盒子單元素居中的技巧：
在彈性盒子中分別設定主軸上的居中和交叉軸上的居中就可以實現
justify-content:center;
align-items:center;

好了，今天的分享就到這裡明天繼續。