Flexbox Playground

Flexbox (Flexible Box Layout) is a CSS layout model that allows elements inside a container to be automatically arranged, aligned, and distributed along one axis (row or column). It's ideal for 1-dimensional layouts — navigation bars, card rows, centred content — and is now supported in all modern browsers.

justify-content controls alignment along the main axis (the direction flex items flow). align-items controls alignment along the cross axis (perpendicular to the main axis). When flex-direction is row, justify-content is horizontal and align-items is vertical — and vice versa when column.

Use Flexbox for 1-dimensional layouts where items flow in a single direction (e.g. navigation bars, toolbars, centred content). Use CSS Grid for 2-dimensional layouts where you need to control both rows and columns simultaneously (e.g. page layouts, card grids, dashboards).

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It tells an item to grow and shrink proportionally to fill available space. Multiple items each with flex: 1 will share the container space equally.