Flexbox is a CSS layout model that lets you arrange items in a container along a single axis, either horizontally or vertically. It automatically distributes space and aligns items based on simple properties, making complex layouts much easier to build.
Also called: CSS Flexbox, Flexible Box Layout
Why it matters
Using Flexbox means a website can adapt to different screen sizes without extra code, so clients get a site that looks good on phones, tablets and desktops while development time and maintenance costs stay low.
How it works
When you set a container’s display property to flex, the browser creates a main axis and a cross axis. Each child becomes a flex item whose size and position are controlled by properties such as flex-direction, justify-content, align-items and flex-grow/shrink. The browser calculates the available space and places items accordingly.
The mistake people make
A common error is assuming flex items will automatically shrink to avoid overflow; if flex-shrink is not set or flex-basis is fixed, items can spill out of the container, breaking the layout on smaller screens.
