CSS Flexbox Layout

Flexible Box Layout, commonly called Flexbox, is a CSS module designed to organize items along one main axis. A container can distribute free space, align children, wrap items and change direction, which makes it useful for navigation bars, small card rows, form actions and interface components that must tolerate varying text lengths.

The core properties include display: flex, flex-direction, justify-content, align-items and gap. Flexbox lays out a group of items primarily along one direction; CSS Grid is often a better fit when both rows and columns require coordinated control. Flexbox and Grid work together, and one does not universally replace the other.

Responsive design still requires testing for wrapping, keyboard focus order and content growth. Changing the visual order of elements with CSS does not necessarily change the order screen readers or keyboard users encounter, so meaningful source order remains important.