CSS Layouts: Flexbox
Overview
The CSS display property of flex makes creating and controlling responsible layouts easy especially in one horizontal or vertical container.
"For a long time, the only reliable cross-browser compatible tools
available for creating CSS layouts were features like floats and positioning. These work, but
in some ways they're also limiting and frustrating. The following simple layout designs are
either difficult or impossible to achieve with such tools in any kind of convenient, flexible
way:
- Vertically centering a block of content inside its parent.
- Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
- Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content."
Prepare
- Watch: 🎦 Learn Flexbox - Web Dev Simplified
- Read: 📄 Flexbox - MDN
Activity Instructions
- Complete the following online tutorial on CSS Flexbox (24 Levels): Flexbox Froggy