Flexbox

One-dimensional layout: direction, justify, align, gap, wrap and grow.

Video tutorialTrack course · freeCodeCamp

CSS Full Course — Zero to Hero

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 1 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

4/4

1. 00:00Flexbox. One-dimensional layout: direction, justify, align, gap, wrap and grow.
2. 00:05Flexbox lays items out along one axis. justify-content works along the main axis, align-items along the cross axis.
3. 00:12Try it yourself — edit the sample and run it in the browser.
4. 00:17Reference table: Property, Does.

Flexbox lays items out along one axis. justify-content works along the main axis, align-items along the cross axis.