An introduction to CSS layout¶

CSS page layout techniques allow us to take elements contained in a web page and control where they're positioned relative to the following factors: their default position in normal layout flow, the other elements around them, their parent container, and the main viewport/window. The page layout techniques we'll be covering in more detail in this module are:

• Normal flow
• The display property
• Flexbox
• Grid
• Floats
• Positioning
• Table layout
• Multiple-column layout

Learning resources¶

• Introduction to CSS layout at MDN
• Flexbox

More resources¶

• CSS tricks
• Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)
• Flexbox Defense is a game to learn Flebox.
• Flexbox Froggy is a game to learn Flexbox.
• Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
• Flexbox Patterns is a website that shows off a bunch of Flexbox examples.
• Flex Box Adventure is a game to learn Flexbox.