2）居中對齊的 flex 項

3）鋪開的 flex 項

• space-evenly : flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。（愚人碼頭註：該屬性以前很少看到，原因是以前瀏覽器不支持，chrome 也是 60 版本之後才支持。延伸一下，align-content: space-evenly 也是這個邏輯，建議在 chrome 60 下查看 這個demo 。 ）
• space-between : 任何兩個相鄰 flex 項之間的間距是相同的，但不一定等於第一個/最後一個 flex 項與 flex 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最後一個項目之間的間距是相等的。
• space-around : flex 容器中的每個 flex 項的每一側間距都是相等的。請註意，這意味著兩個相鄰 flex 項之間的空間將是第一個/最後一個 flex 項與其最近邊緣之間的空間的兩倍。

4）flex 項在交叉軸上的對齊

通常，我們想沿著 flex 方向（主軸）排列 flex 項，還可以在垂直於它的方向（交叉軸）上對齊 flex 項。通過設置 justify-content:center和align-items:center，可以使 flex 項水平和垂直放置在 flex 容器的中心。

Flexbox 布局續