CSS 布局指南
CSS 布局指南旨在汇集常见布局模式的“食谱”，这些都是你可能需要在自己的网站中实现的内容。除了提供可作为项目起点的代码外，这些食谱还强调了布局规范的不同使用方式，以及作为开发者可以做出的选择。
注意：如果你是 CSS 布局的新手，那么你可能想先看看我们的CSS 布局学习模块，因为它会为你提供使用此处食谱所需的基础知识。
食谱
| 示例 | 描述 | 布局方法 |
|---|---|---|
| 媒体对象 | 一个两列盒子，一侧是图像，另一侧是描述性文本，例如 Facebook 帖子或推文。 | CSS Grid，float 回退，fit-content 尺寸 |
| 列 | 何时为你的列选择多列布局、弹性盒子或网格布局。 | CSS Grid，多列布局，弹性盒子 |
| 居中一个元素 | 如何水平和垂直居中一个元素。 | 弹性盒子，盒对齐 |
| 粘性页脚 | 在内容较短时创建位于容器或视口底部的页脚。 | CSS Grid，弹性盒子 |
| 分离式导航 | 一种导航模式，其中一些链接在视觉上与其他链接分离。 | 弹性盒子，margin |
| 面包屑导航 | 创建一个链接列表，允许访问者在页面层次结构中向上导航。 | Flexbox |
| 带徽章的列表组 | 带有徽章以显示计数的项目列表。 | 弹性盒子，盒对齐 |
| 分页 | 指向内容页面的链接（例如搜索结果）。 | 弹性盒子，盒对齐 |
| 卡片 | 卡片组件，以卡片网格的形式显示。 | 网格布局 |
| 网格包装器 | 用于将网格内容对齐到中心包装器中，同时允许项目跳出。 | CSS Grid |
贡献食谱
与所有 MDN 内容一样，我们希望您能按照上面所示的相同格式贡献一个食谱。请参阅添加布局指南食谱的指南，了解编写自己的示例的模板和指南。