The Web: HTML & CSS

🧭 Flexbox in depth

Align and distribute anything without fighting CSS, vertical centering included. Master the axes, the container, the items and the layout patterns you'll use every day.

What you'll learn

Distribute and align items with justify-content (main axis) and align-items (cross axis) based on flex-direction
Share space among items with flex-grow, flex-shrink, flex-basis and the flex shorthand
Center elements on both axes and allow multiple lines with flex-wrap and gap
Build real patterns: perfect centering, navbar with space-between and layouts with flex: 1

Lessons

The flex container: axes and distributionflex-direction, justify-content, align-items, flex-wrap and gap. The items: grow, shrink, basis, self and orderflex-grow, flex-shrink, flex-basis, the flex shorthand, align-self and order. Real patterns: centering, navbar and distributionPerfect centering, logo/links navigation bar and space distribution.

Practice this module in the app

DevPath is a hands-on course: you read the theory here; in the app you put it into practice with exercises that really run, offline.

Start free in the app →