CSS Layout cookbook
source link: https://www.tuicool.com/articles/hit/ArIjm2j
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
Note: If you are new to CSS layout then you might first like to take a look at our CSS layout learning module , as this will give you the basic grounding you need to make use of the recipes here.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK