CSS Flexbox Generator & Playground
Try every flexbox property on live boxes, understand the result and copy the code.
Preview
Container
Items
Why this size?
| Item | Starts at | Grows / shrinks | Ends at |
|---|
Code
About the CSS Flexbox Generator & Playground
Build a flexbox layout by changing it and watching it change. The container has every flex property — flex-direction, flex-wrap, justify-content, align-items, align-content and the row and column gaps — plus a width and height to try, and each live item has its own flex-grow, flex-shrink, flex-basis, order, align-self, auto margins, label length and cross size. Select an item in the preview to edit it, or change all of them at once.
Every setting is explained in plain English next to the controls, and Why this size? shows the arithmetic the browser does for the selected item’s line: the size each item starts from, how much free space there is (or how much is missing), and how much each item grows or shrinks — using the algorithm from the flexbox specification, checked against what your browser actually drew. Start from presets such as perfect centring, a navigation bar, equal columns, sidebar and content, wrapping cards and tags, a sticky footer or a media object, then copy the container and item CSS, the HTML or the Tailwind classes.
How to use it
- Pick a preset, or start with the simple row.
- Under Container, choose the direction, wrapping, justify-content, align-items and align-content, and set the gaps. The explanations update as you go.
- Under Items, select an item (in the preview or by number) and set flex-grow, flex-shrink, flex-basis, order, align-self or an auto margin; tick Change all items at once to edit them together. Add or remove items with the buttons.
- Change the container width and height to see wrapping, shrinking and alignment react, and read Why this size?.
- Copy or download the CSS, the HTML, or the Tailwind version.
Examples
Preset: Perfect centring
.flex-container {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
min-height: 220px;
}Preset: Navigation bar (item 2 has margin-left: auto)
.flex-container > :nth-child(2) {
margin-left: auto;
}
<div class="flex items-center gap-4 min-h-[72px]">
<div>Item 1</div>
<div class="ml-auto">2</div>
…An auto margin takes all the free space on its side, so everything after it moves to the end.
Three items of 100px with flex-grow 1, 1 and 2 in a 600px container
300px of free space → +75px, +75px, +150px → 175px, 175px and 250px
The same split the tool shows under Why this size? (with flex-shrink, the shortfall is shared by flex-shrink × starting size instead).
Common uses
- Building navigation bars, toolbars, button groups, card rows and form layouts.
- Learning what justify-content, align-items and align-content do — and why align-content seems to do nothing on one line.
- Debugging why an item will not shrink (its content sets a minimum) or why flex: 1 items are not equal (their flex-basis differs).
- Converting a flex layout to Tailwind classes or back.
The two axes
A flex container lays its items out along the main axis — horizontal for flex-direction: row, vertical for column — and aligns them along the cross axis at right angles to it. justify-content works on the main axis, align-items and align-self on the cross axis, and align-content positions whole lines when items wrap onto several, so it has no effect with flex-wrap: nowrap. The -reverse directions and order change only what you see: screen readers and the Tab key still follow the HTML order, so keep it meaningful (CSS Flexbox).
grow, shrink and basis
Each item starts from its flex-basis (its content size for auto). When the line has room left, the free space is shared out in proportion to flex-grow; when it is too full, the shortfall is taken in proportion to flex-shrink multiplied by the starting size (without padding and border), so wider items give up more. By default an item will not shrink below its content (its minimum size is auto); set min-width: 0 to let long text shrink and wrap or scroll. Common shorthands: flex: 1 = 1 1 0 (equal shares from zero, so equal widths), flex: auto = 1 1 auto (shares on top of the content size), flex: none = 0 0 auto (fixed).
Auto margins and gap
gap puts space between items and between lines, never at the outer edges, and is supported for flexbox in all current browsers. An auto margin absorbs the free space on its side after the items have flexed, which is the simplest way to push one item to the end — such as the last links of a navigation bar — or to centre a single item with auto margins on both sides.
Limitations
- Items are the tool’s own boxes with a short, medium or long label; real content (images, inputs) can have other minimum sizes.
- Why this size? explains rows; in a column the same rules apply to heights, and an auto-height column has no free space to grow into.
- Width and height properties of items are not edited here, except a fixed size on the cross axis; use flex-basis for the main size.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I center a div with flexbox?
On the parent: display: flex; justify-content: center; align-items: center; and give the parent a height (for example min-height: 100vh). The Perfect centring preset shows it; in Tailwind it is flex items-center justify-center.
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis (left to right in a row), align-items places them across it (top to bottom in a row). Change flex-direction to column and the two swap directions.
Why are my flex: 1 items not the same width?
Usually because one item cannot shrink below its content (its minimum size), or because the shorthand you used kept flex-basis: auto, so each item adds its share of free space to a different content width. flex: 1 (basis 0) gives equal widths unless content forces an item wider; add min-width: 0 to allow it to shrink.
When should I use flexbox instead of grid?
Flexbox is one-dimensional: it handles a row or a column whose items size themselves, which suits navigation bars, toolbars and wrapping tags. Grid is two-dimensional, for layouts where rows and columns must line up; see the CSS grid generator.
Is anything uploaded?
No. The layout is built and measured in your browser, and the page works offline once loaded.