flexbox

Flexbox is a CSS layout model designed to provide a simple way to arrange, align and distribute space among items in a container, even when their size is unknown or dynamic. It is optimized for layout in one dimension—either a row or a column—called the main axis, with a cross axis perpendicular to it.

In CSS, a container becomes a flex container by setting display: flex or display: inline-flex. Its direct children become flex items. Key features include flex-direction to set row or column orientation, flex-wrap to allow items to wrap onto multiple lines, and justification and alignment controls (justify-content, align-items, align-content) to position items along both axes. The gap property adds spacing between items.

Each flex item can be sized using flex-basis (its initial main-size), and subsequently flex-grow and flex-shrink to absorb free space or shrink. The flex shorthand combines these values. The order property can rearrange items without changing HTML order.

Flexbox excels at centering, equal-height columns, and dynamic resizing, making responsive layouts easier. It is generally preferred over floats for one-dimensional layouts. However, for two-dimensional grid-like layouts, CSS Grid is often more suitable.

History and usage: The Flexbox Layout Module was introduced to standardize flexible layouts in CSS. It is supported in all modern browsers and is widely used in web design to create flexible navigation bars, card layouts, and dashboards.