Académique Documents
Professionnel Documents
Culture Documents
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 1/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web
Layout mechanics
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 2/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web
Controls how an element is represented within the Controls whether text is wrapped around the Gives strict, coordinate-based control over layout.
flow. element.
position: absolute
display: inline float: left|right|none
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 3/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web
Allows other elements beside; margin, Forces an element to not move when the page
padding & width work. Can create columns, is scrolled.
but will force a space between boxes.
z-index
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 4/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web
Centering elements
.card {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
<h1>Micropachycephalosaurus</h1>
<p>Longest dinosaur name ever!
</p>
</div>
</div>
.banner {
position: relative;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 6/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web
Common code
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 7/7