Build CSS flexbox layouts visually with controls for direction, wrap, justify, align, and item properties.
Flex layout depends on two axes whose meaning changes with flex-direction. This generator lets you adjust container controls such as direction, wrapping, justification, and alignment, then inspect the resulting layout and CSS. Item controls let you explore how individual flex children participate in that container. The common surprise is that justify-content does not always mean horizontal alignment: it operates on the main axis, while alignment properties generally operate on the cross axis. Changing from row to column therefore changes what those controls do visually.
A concrete input and expected output from the current implementation.
Input
direction: row; wrap: nowrap; justify: space-between; align-items: center
Expected output
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
The items form one horizontal flex line. Free space on the main axis is placed between the items, while each item is centered on the vertical cross axis.
The direction control establishes the main-axis orientation and flow direction, while wrapping determines whether items remain on one flex line or may form additional lines. Justification distributes available space along the main axis. Alignment positions items along the cross axis. The generated declarations describe the selected combination so it can be transferred into a stylesheet.
Item-level settings affect selected direct children rather than the container as a whole. These settings can change an item's sizing, ordering, or individual cross-axis alignment when the corresponding controls are available. Their visible effect still depends on the container dimensions, the other items, and the amount of free or insufficient space in the active flex line.
justify-content follows the main axis, not a permanently horizontal axis. With flex-direction: row, the main axis is horizontal in the usual left-to-right case. With flex-direction: column, it is vertical. The cross axis changes with it, so alignment controls can appear to exchange visual roles when the direction changes.
No. Container direction, wrapping, justification, and alignment do not by themselves guarantee equal widths. Flex item sizes also depend on their content, intrinsic minimum sizes, available container space, and item sizing declarations. Equal columns require suitable item rules, and long unbreakable content can still affect the final widths.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.