Interactive CSS Flexbox Generator
Learn and build responsive CSS flex layouts by changing direction, alignment, wrapping, gaps and per-item flex properties.
Controls
Live preview
Generated code
/* Your CSS will appear here */Interactive CSS Flexbox Generator: how it works
Adjust container properties, then click any numbered child in the preview to edit its growth, order, basis or self-alignment. The generator updates the preview and CSS output immediately, so you can test different choices before committing them to your project.
Popular ways to use this CSS generator
- Align navigation menus and button groups horizontally.
- Center elements in a container with justify-content and align-items.
- Experiment with flex-grow, flex-basis and responsive wrapping.
For more ideas, try the related tools below. All controls work right in your browser, and the generated code can be included in your own stylesheet.
About flexbox CSS.
What is the difference between justify-content and align-items?
justify-content positions items on the main axis; align-items controls alignment on the cross axis.
How does flex-wrap work?
When wrapping is enabled, items can flow onto additional lines instead of squeezing into one line.
What does flex-grow do?
flex-grow determines how much of the remaining space a flex item receives relative to its siblings.
When should I use Flexbox instead of CSS Grid?
Flexbox is usually best for arranging items along one main axis, such as a toolbar or navigation row. Grid is often better when rows and columns need coordinated placement.
How do I center an item horizontally and vertically with Flexbox?
Set display: flex; justify-content: center; align-items: center; on the container, assuming the default row direction.
What is the difference between gap and margin in Flexbox?
gap adds consistent spacing between flex items without adding extra space around the outer edges. Margins apply to individual elements.
Can Flexbox items have different widths?
Yes. Use flex-basis, flex-grow, flex-shrink, or width to control each item independently. The layout playground lets you explore these values.