昨天搞懂了單一個方塊的「盒模型（Box Model）」，知道了邊距跟內距怎麼算。但問題來了：當畫面上有很多個方塊要排在一起時，該怎麼讓它們乖乖排好呢？

簡單來說，如果曾經在Figma裡用過Auto Layout(自動佈局)來排版按鈕跟清單，那其實已經懂了80%的Flexbox(彈性盒模型)了!

什麼事Flexbox?

在過去沒有 Flexbox 的年代，工程師要排版簡直是在用各種詭異的方法（float、position）克難對齊。直到 Flexbox（Flexible Box Layout）出現，整個前端排版才真正進入人性化的時代。

核心概念:

1. 設定一個「父容器（Flex Container）」
2. 裡面的「子物件們（Flex Items）」就會自動乖乖聽話、按規矩排好隊！

語法:

.container {
    display: flex; /* 召喚彈性盒模型 */
}

Auto Layout vs. Flexbox

在 Figma 裡拉完 Auto Layout 後，右側面板可以調整的那些對齊按鈕，在 CSS 裡它們長得幾乎一模一樣：

1. 主軸方向（flex-direction）：

• 就像 Figma 裡的 Row（水平排列）和Column（垂直排列）
• 要讓子元素橫著排還是直著排，一個屬性就能切換

2. 主軸對齊（justify-content）：

• 就像 Figma 裡元件的間距分佈
• 可以設定靠左、靠右、置中，或是兩端對齊（space-between）、平均分散（space-around）。

3. 交錯軸對齊（align-items）：

• 就像 Figma 裡的垂直置中、靠上對齊或靠下對齊
• 解決了長年以來網頁要「垂直置中」超級麻煩的痛點！

今日小結:

今天我們透過 Figma 的 Auto Layout 觀念，無痛解鎖了網頁排版的最強神器 Flexbox。只要掌握了「主軸對齊」與「交錯軸對齊」，90% 的導覽列、卡片列表排版基本上都能輕鬆搞定！

第一週的基礎打底告一段落，明天我們就要來進行第一週的小結，動手用 HTML 與 Flexbox 刻出一張漂亮的個人名片卡片！