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

Flexboxmargin
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.