CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that lets you arrange elements in a row or column, distributing space and aligning items efficiently. It is activated by setting display: flex or display: inline-flex on a container, which makes all direct children into flex items. Unlike older methods that relied on floats or tables, Flexbox was designed specifically for interface layout.

Flexbox is a one-dimensional layout system best suited for arranging items in a single row or column - ideal for navigation bars, button groups, and distributing items along one direction. CSS Grid is two-dimensional and handles both rows and columns simultaneously, making it better for overall page layouts and card grids. A common pattern is to use Grid for page structure and Flexbox for components within it.

flex-basis sets the starting size of the item before any growing or shrinking takes place. flex-grow determines how much the item will expand to fill extra space relative to other flex items. flex-shrink determines how much the item will contract when there is not enough space. All three can be combined using the flex shorthand, for example flex: 1 1 auto.