Guided Notes

Flexbox

One-dimensional layout: flex containers, direction, wrapping, alignment, gap, and growing and shrinking items.

The flex container

Slide 1 / 5

display: flex turns an element into a flex container, and its direct children become flex items laid out in a row.

Flexbox is for one-dimensional layout β€” a row or a column: navigation bars, button groups, card rows, centering.

The main axis runs in the flex-direction (row: left to right); the cross axis runs perpendicular to it. justify-content works on the main axis, align-items on the cross axis.

← Units & CSS Functions