CSS Layout cookbook - CSS（层叠样式表） 编辑

CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。

Note: 如果你是首次接触CSS布局，你可以先看一下CSS layout learning module，书中的基础知识有利于你更好的使用本书中的布局样式。

布局样式

Recipe	Description	Layout Methods
Media objects	一个两栏的框，一边是图片，另一边是描述性文字，例如facebook上的帖子或推特	CSS Grid, float fallback, fit-content sizing
Columns	在什么时候选择multi-column layout,flexbox或者grid	CSS Grid, Multicol, Flexbox
Center an element	如何水平或者垂直居中一个item	Flexbox, Box Alignment
Sticky footers	创建一个页脚，当内容较短时，该页脚位于容器或视图的底部	CSS Grid, Flexbox
Split navigation	一种导航模式，里面的一些links显示的区分于其他	Flexbox, margin
Breadcrumb navigation	创建链接列表，允许访问者在页面层次结构中向上导航	Flexbox
List group with badges	一个带有count计数的徽章的items列表	Flexbox, Box Alignment
Pagination	链接到内容页面 (比如搜索结果).	Flexbox, Box Alignment
Card	卡片组件，显示在卡片网格中	Grid Layout
Grid wrapper	For aligning grid content within a central wrapper, while also allowing items to break out.	CSS Grid

Contribute a Recipe

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.