CSS Layout cookbook

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.