flex彈性佈局

　　借鑑於:Flex 佈局教程：語法篇 - 阮一峰的網路日誌

• flex與flex-grow的區別，都是分配剩餘空間，但+grow就不會加入自生大小，而單獨的flex就會加入自生空間。

• 容器：父元素

  給誰新增flex誰就是容器，子元素就是專案

  功能：1.所有的專案預設情況在一行顯示。

  2.如果所有的專案寬度之和大於容器的寬度。專案會自動縮小。 即不會超出容器的尺寸（不會換行）

• 專案：子元素

• 主軸：X軸（預設值）

• 交叉軸：Y軸（預設值）

設定換行

• flex-wrap：nowrap 不換行（預設值）

• flex-wrap：wrap 行換（當專案尺寸之和大於寬度才會起效）

• flex-wrap：wrap-reverse 倒序換行（起始位置改為底部且主軸為X軸）

主軸(x軸)對齊方式

• justify-content：flex-start 【預設值】（主軸對齊方式，左對齊）

• justify-content：flex-end（主軸對齊方向，右對齊）

• justify-content：center（主軸對齊方向，居中）

• justify-content：space-between（主軸對齊方向，兩端對齊）

• justify-content：space-around（主軸對齊方向，分散對齊）

• justify-content：space-evenly（主軸對齊方向，平均分配專案內容）

交叉軸(y軸)對齊方式

• align-items：center 交叉軸居中

• align-items：flex-start 交叉軸底部開始

• align-items：flex-end 交叉軸底部倒序開始

• align-items：baseline 交叉軸基線對齊

• align-items：stretch 預設值，當專案高度為auto即未設定高度時，專案的高就是容器的高（即自動盛滿容器）