Flexbox (Flexible Box Layout) is a one‑dimensional layout model in CSS that allows you to distribute space along a single axis – either horizontally or vertically. It gives you powerful alignment and spacing capabilities, making it much easier to create responsive, modern web layouts without using floats or complex positioning.

The most important container properties are: display: flex (or inline-flex), flex-direction (row / column), flex-wrap (nowrap / wrap), justify-content (main‑axis alignment), align-items (cross‑axis alignment for all items), align-content (spacing between wrapped lines), and gap (spacing between items). This playground lets you adjust all of them in real time.

Set the parent container to display: flex; justify-content: center; align-items: center;. justify-content centers along the main axis, and align-items centers along the cross axis. Try it in the playground above!

align-items aligns individual flex items along the cross axis inside their line, while align-content controls the spacing between multiple lines when flex-wrap: wrap is active. If there is only one line, align-content has no visible effect.

flex-basis defines the initial main size of a flex item before free space is distributed. It can be auto (use the item's content size) or a specific length (like 200px). Combined with flex-grow and flex-shrink, it determines how the item behaves when the container resizes.

Use flex-wrap: wrap to let items flow into multiple rows/columns. You can then use percentages or flex-basis alongside flex-grow to create fluid grids. Media queries can also change flex-direction to stack items on small screens.