Part 1: Flexbox Basics

Flexible Box Module

We use the Flexible Box Module (Flexbox) to create responsive elements within containers that can be automatically arranged based on screen size. It also has several properties that control how space is distributed among items on a page.

Otherwise known as the one-dimensional model, Flexbox is ideal for laying elements out in a single direction (either a row or column). The CSS Grid layout is the two-dimensional model, better suited to laying elements out in both directions simultaneously. We’ll look at this later in the course.

Flexbox gives us some very powerful features, which we’ll explore in this lesson.

The Flexbox layout

Here we have a blue container containing a number of elements (orange boxes):