W04 Learning Activity: CSS Flex
Overview
The flex CSS display property makes creating and controlling responsive layouts easy especially in a single horizontal or vertical container.
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
"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
- Read: Flexbox – MDN
- Video: ▶️ CSS Flexbox Basics [ 3:01 minutes ] – Example CodePen ☼ CSS FlexBox
- Video Demonstration: ▶️ Using CSS Flexbox on a Menu [ 1:33 minutes ] – Example CodePen ☼ CSS Flexbox Nav Menu
Activity Instructions
- Complete the following online tutorial on CSS Flexbox (24 Levels): Flexbox Froggy
