CSS 彈性盒子 flex：一維排版與空間分配
Flex 是 CSS 中，用來對一個方向快速排列和對齊元素的排版方式，它的重點在於 彈性調整空間。
display
使用方式相當簡單，掌握幾個步驟:
- 找出欲排列成水平或垂直的元素。
- 呈上，找到之後對其父層元素進行
display: flex的設定。 - 接下來進行微調即可，包含：方向、換行、對齊...等。
flex-direction
子層元素的排列方向。
row：由左到右，從上到下，預設值。row-reverse: 與row相反。column：從上到下。column-reverse：與column相反。
flex-wrap
子層元素的換行排列狀態。
nowrap: 不換行，預設值。wrap: 換行。wrap-reverse: 換行並反轉。
justify-content
子層元素的水平對齊方式。
flex-start: 對齊最左邊。left: 對齊最左邊。flex-end: 對齊最右邊。right: 對齊最右邊。center: 水平置中。space-between: 頭、尾元素分別貼齊頁面的最左緣及最右緣，平均分配空間。space-around: 每個元素之間的空間相等。space-evenly: 平均分配空間。
align-items
子層元素的垂直對齊方式。
flex-start: 靠上對齊。flex-end: 靠下對齊。center: 垂直置中。stretch: 元素全部撐開至 Flexbox 的高度，若子層元素有設定高度，則以各自的高度為主。baseline: 元素的文字基線對齊。
order
控制子層元素的順序。值越小，排列愈前面，且可以為負值。
主軸與交錯軸
flex-direction 決定 主軸 的方向，另一個方向就是交錯軸：
| 屬性 | 作用的軸 |
|---|---|
justify-content | 主軸 |
align-items | 交錯軸 |
改成直向排列時，兩者的作用方向就會對調，這是最常記反的地方。
常用寫法
css
.row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px; /* 只在項目之間產生間距 */
flex-wrap: wrap; /* 空間不足時換行 */
}
.grow {
flex: 1; /* 平分剩餘空間 */
}常見問題
justify-content 和 align-items 老是記反？
記住 justify 管主軸、align 管交錯軸。主軸方向由 flex-direction 決定，改成直向排列時兩者的作用方向就會對調。
flex: 1 是什麼意思？
它是 flex-grow、flex-shrink、flex-basis 的簡寫，代表可以放大、可以縮小、基準尺寸為零，效果是讓項目平分剩餘空間。
項目為什麼不換行？
因為 flex-wrap 預設不換行，空間不足時會壓縮項目而不是換行。需要換行請把它設成 wrap。
項目之間的間距怎麼設比較好？
用 gap。它只在項目之間產生間距，不會在首尾多出空白，比替每個項目加外距乾淨得多。
