CSS Flexbox 完全攻略

什麼是 Flexbox？

Flexbox 是 CSS3 引入的佈局模式，專為一維排版設計。它讓容器內的元素能夠自動調整尺寸、對齊與分佈。

容器屬性

• display: flex：啟用 Flexbox
• flex-direction：主軸方向（row / column）
• justify-content：主軸對齊
• align-items：交錯軸對齊
• flex-wrap：是否換行

項目屬性

• flex：伸縮比例（flex-grow flex-shrink flex-basis）
• align-self：單獨對齊
• order：排列順序