WDD 130: Web Fundamentals

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: - MDN

Prepare

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