WDD 130: Web Fundamentals

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.

Prepare

CSS Flexbox makes Vertically centering a block of content inside its parent easier. The children of a flex container work together to fill the available, designed space.

Activity Instructions

  1. Complete the following online tutorial on CSS Flexbox (24 Levels): Flexbox Froggy
Screenshot of flexboxfroggy.com Level 22 of 24
Screenshot of Flexbox Froggy Level 22