CSS Layout cookbook

CSS layout cookbook 这本书 旨在汇集通用的布局样式的诀窍,这些布局你可能在自己的网站中会用到。除了提供可以在你的项目中作为starting point使用的代码,它还强调了使用布局规范的不同方式,以及作为开发人员可以做出的选择。

Note: 如果你是首次接触这本书,你可以先看一下CSS layout learning module,它会给你你需要在这里使用的recipes的基础理解

The Recipes

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显示的区分于其他

Flexboxmargin
Breadcrumb navigation

创创建链接列表,允许访问者在页面层次结构中向上导航。

Flexbox
List group with badges

一个带有count计数的徽章的items列表

Flexbox, Box Alignment
Pagination Links to pages of content (such as search results). Flexbox, Box Alignment
Card A card component, which displays in a grid of cards. 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.