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