Visual Flexbox playground with live preview. Configure container properties, add items, and copy the generated CSS.
CSS Flexible Box Layout (Flexbox) is a one-dimensional layout model that makes it easy to design flexible responsive layouts. It excels at distributing space among items in a container and aligning them, even when their sizes are unknown or dynamic.
| Property | Applies To | Values |
|---|---|---|
flex-direction | Container | row, row-reverse, column, column-reverse |
justify-content | Container | flex-start, flex-end, center, space-between, space-around, space-evenly |
align-items | Container | stretch, flex-start, flex-end, center, baseline |
flex-wrap | Container | nowrap, wrap, wrap-reverse |
flex-grow | Item | 0, 1, 2, … (any non-negative number) |
flex-shrink | Item | 0, 1, 2, … (any non-negative number) |
flex-basis | Item | auto, 0, px, %, rem, etc. |
align-self | Item | auto, flex-start, flex-end, center, stretch, baseline |
order | Item | 0, 1, −1, … (any integer) |
gap | Container | px, rem, %, etc. |
display: flex; justify-content: center; align-items: center;display: flex; justify-content: space-between; align-items: center;display: flex; with children having flex: 1;display: flex; flex-direction: column; min-height: 100vh; with content having flex: 1;Flexbox is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. IE11 has partial support with some known bugs. Over 99% of global users have full Flexbox support.
JSON formatter, regex tester, hash generator, password generator, and more — all free, all in your browser.
Browse All Tools →Add display: flex to a parent container. Then use flex-direction, justify-content, align-items, and flex-wrap to arrange children. The generator lets you adjust all properties visually with a live preview.
justify-content aligns items along the main axis (horizontal in a row). align-items aligns along the cross axis (vertical in a row). For a row container: justify-content = left/center/right, align-items = top/middle/bottom.
Set the parent to display: flex; justify-content: center; align-items: center. This centers the child both horizontally and vertically — the cleanest CSS centering technique regardless of element size.
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. It makes the item grow to fill available space. If multiple siblings have flex: 1, they share space equally — great for equal-width columns.
Use Flexbox for one-dimensional layouts like a row of nav links or a stack of cards. Use CSS Grid for two-dimensional layouts where you control both rows and columns simultaneously, like a full page structure.