CSS Flexbox Generator

Flexbox, formally the CSS Flexible Box Layout module, is a one-dimensional layout algorithm: it distributes space along a single axis at a time. Declaring display: flex on a container creates a flex formatting context whose main axis is set by flex-direction (row, row-reverse, column, or column-reverse) and whose cross axis runs perpendicular to it. justify-content positions items along the main axis, while align-items positions them along the cross axis, which is why switching flex-direction from row to column silently swaps what those two properties appear to do. The browser first computes each item hypothetical main size from flex-basis (default auto, falling back to the declared width or height), subtracts that total plus any gap from the container size, then distributes leftover space by flex-grow or removes overflow by flex-shrink, which is weighted by each item basis rather than applied evenly. In practice, gap values of 8 to 24 px cover most component spacing, with 16 px a common default matching a 16 px root font size. Two limitations trip up most developers. align-content has no effect unless flex-wrap is set to wrap or wrap-reverse, because it distributes space between flex lines and a nowrap container has only one line. And a flex item default min-width of auto prevents it from shrinking below its content size, so long unbroken text or a wide table overflows its container until min-width: 0 or overflow: hidden is set on the item itself.

The layout model descends from the Mozilla XUL box, an internal layout system used to build the Firefox user interface. The W3C published the first Working Draft of the CSS Flexible Box Layout Module in July 2009, using display: box with properties such as box-orient, box-pack, and box-align, which shipped behind the -webkit- and -moz- prefixes. In March 2011 a revised draft replaced that syntax with display: flexbox and properties like flex-pack; Internet Explorer 10 shipped this intermediate version as -ms-flexbox, which is why legacy stylesheets sometimes contain three mutually incompatible spellings of the same layout. The specification stabilized in September 2012, when the working group settled on display: flex with flex-direction, justify-content, and align-items, the syntax still in use today. Editors of the module have included Tab Atkins Jr., Elika Etemad, Rossen Atanassov, and Alex Mogilevsky. Unprefixed support arrived in Chrome 29 and Firefox 28 across 2013 and 2014, and the module reached W3C Candidate Recommendation status in 2016. The gap property, originally defined for Grid layout, was later extended to flex containers and became broadly usable in browsers around 2020, replacing the older workaround of negative container margins paired with per-item margins.