CSS Layout cookbook
Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.
В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика. Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.
The Recipes
| Recipe | Description | Layout Methods |
|---|---|---|
| Media Objects | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | CSS Grid, float fallback, fit-content sizing |
| Columns | When to choose multi-column layout, flexbox or grid for your columns | CSS Grid, Multicol, Flexbox |
| Center an element | How to center an item horizontally and vertically | Flexbox, Box Alignment |
| Sticky footers | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | CSS Grid, Flexbox |
| Split Navigation | A navigation pattern where some links are visually separated from the others. | Flexbox, margin |
| Breadcrumb Navigation | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | Flexbox |
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.