前篇提到我搞懂 Box Model 和 Position 定位，而這次終於也理解了 CSS 排版的重點—Flexbox（彈性盒模型）！

以前做平面設計時，軟體工具欄裡都有「水平置中」、「垂直置中」、「等距分佈」的對齊按鈕。但在 CSS 裡，如果只靠 Margin 或 Position 來算距離，往往要把數字算得很精細，稍微改個尺寸可能排版就崩掉了。

而 Flexbox 就像是網頁裡的自動對齊工具。只要在父層寫上一行 display: flex;，裡面的所有元件就會瞬間變成「彈性排列」！

最常用的兩大對齊屬性：

1. justify-content（水平對齊 / 主軸）

• center：水平置中。
• space-between：自動把剩餘空間平均分配在元件之間，讓左右貼邊、中間等距分佈！

2. align-items（垂直對齊 / 交叉軸）

• center：垂直置中（小白福音耶，不用再算推擠間距了）。

/* 讓內容完美水平垂直置中的神級寫法 */
.container {
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中 */
}

這概念完全就是排版軟體裡的「對齊面板」！不再需要手動算像素，瀏覽器會自動把空間伸縮拉勻，對於做畫面視覺的人來說真的太療癒了。

Day 21，解鎖了 Flexbox 排版神器。