CSS 佈局指南
CSS 佈局指南旨在彙集常見佈局模式的“食譜”，這些都是你可能需要在自己的網站中實現的內容。除了提供可作為專案起點的程式碼外，這些食譜還強調了佈局規範的不同使用方式，以及作為開發者可以做出的選擇。
注意：如果你是 CSS 佈局的新手，那麼你可能想先看看我們的CSS 佈局學習模組，因為它會為你提供使用此處食譜所需的基礎知識。
食譜
| 示例 | 描述 | 佈局方法 |
|---|---|---|
| 媒體物件 | 一個兩列盒子，一側是影像，另一側是描述性文字，例如 Facebook 帖子或推文。 | CSS Grid，float 回退，fit-content 尺寸 |
| 列 | 何時為你的列選擇多列布局、彈性盒子或網格佈局。 | CSS Grid，多列布局，彈性盒子 |
| 居中一個元素 | 如何水平和垂直居中一個元素。 | 彈性盒子，盒對齊 |
| 粘性頁尾 | 在內容較短時建立位於容器或視口底部的頁尾。 | CSS Grid，彈性盒子 |
| 分離式導航 | 一種導航模式，其中一些連結在視覺上與其他連結分離。 | 彈性盒子，margin |
| 麵包屑導航 | 建立一個連結列表，允許訪問者在頁面層次結構中向上導航。 | Flexbox |
| 帶徽章的列表組 | 帶有徽章以顯示計數的專案列表。 | 彈性盒子，盒對齊 |
| 分頁 | 指向內容頁面的連結（例如搜尋結果）。 | 彈性盒子，盒對齊 |
| 卡片 | 卡片元件，以卡片網格的形式顯示。 | 網格佈局 |
| 網格包裝器 | 用於將網格內容對齊到中心包裝器中，同時允許專案跳出。 | CSS Grid |
貢獻食譜
與所有 MDN 內容一樣，我們希望您能按照上面所示的相同格式貢獻一個食譜。請參閱添加布局指南食譜的指南，瞭解編寫自己的示例的模板和指南。