CSS Flexbox Generator
Lay out elements with CSS Flexbox visually. Choose the flex direction, justify-content, align-items, wrap and gap, see the change instantly on demo items, then copy the generated flex-container rule.
How to generate CSS Flexbox code
- Pick a flex direction and adjust justify-content and align-items to position the items.
- Set wrap, align-content and a gap, and add demo items to test how the row reflows.
- Copy the generated .flex-container CSS from the output box into your stylesheet.
Examples
Center items on both axes
flexDirection row, justifyContent center, alignItems center
.flex-container { display: flex; justify-content: center; align-items: center; }Vertical stack with a gap
flexDirection column, gap 8px
.flex-container { display: flex; flex-direction: column; gap: 8px; }Frequently asked questions
What is the difference between justify-content and align-items?
justify-content positions items along the main axis (the direction set by flex-direction), while align-items positions them on the cross axis. For a row, justify-content moves items left and right and align-items moves them up and down.
Why does the generated code skip some properties?
The tool only outputs values that differ from the CSS defaults: direction row, justify-content flex-start, align-items stretch and flex-wrap nowrap. That keeps the rule short, since a browser applies those defaults automatically.
When does align-content actually do anything?
align-content only affects a container with multiple wrapped lines, so it needs flex-wrap set to wrap or wrap-reverse and enough items to spill onto a second line. With a single line it has no visible effect.
What do flex-grow, flex-shrink and flex-basis control?
These go on the child items. flex-basis is an item's starting size, flex-grow lets items expand to fill spare space, and flex-shrink lets them shrink when space is tight. The tool emits them in a separate .flex-item rule when you set them.
Does Flexbox work in all modern browsers?
Yes. Unprefixed Flexbox is supported in every current browser, including Chrome, Firefox, Safari and Edge, so the copied code works without vendor prefixes.
Is my layout sent to a server?
No. The preview and the generated CSS are built entirely in your browser, so nothing about your layout leaves your device.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.