CSS 排版詞條 3-20

彈性排版Flexbox

也常叫做：彈性排版、Flex、Flexbox

你可能會這樣說

導覽列的商標要靠左、按鈕靠右，中間自動撐開；或一排標籤要等寬又能換行，手動算寬度永遠對不齊。

Flexbox 是一排東西的排版神器：把容器設成 flex 之後，裡面的元素會照你定的規則分配空間、對齊、調整順序。導覽列、按鈕組、標籤列這種「一橫排」的結構都靠它。

最常用的三句話：水平排列、垂直置中、兩端對齊。跟 AI 說「這排用 flex、左右貼齊、垂直置中」，幾乎不用來回。

它也管換行：允許換行之後，空間不夠時項目會自動折到下一行，而不是硬擠變形。

商標

選單項目

按鈕

排列方向對齊間距

導覽列、按鈕組、標籤列這種「一橫排」的結構都交給 flex；切到直排看看，換方向只要一個屬性。

圖 3-20　一排東西怎麼排、怎麼對齊、間距多少——導覽列就是這麼來的。

中文就可以

導覽列請用彈性排版重做：
容器用 flex，商標靠最左、按鈕靠最右，中間選單自動分配剩餘空間。
所有項目垂直置中，列高 72px。
手機上選單換成直向排列，每項高度 56px。
頁尾那排社群圖示也改成 flex 置中、間距 16px。