๐ฆ Flexbox Generator
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;
}Adjust Flexbox properties โ flex-direction, justify-content, align-items, flex-wrap, and gap โ with a live preview. Copy the generated CSS code directly into your stylesheet. Handy for tracking down a layout bug or prototyping a new layout.
How to use
- Adjust each property (direction, wrapping, main-axis/cross-axis alignment) with the dropdowns and sliders.
- The preview above updates in real time as the boxes rearrange.
- Use "Copy" to copy the generated CSS code and paste it into your stylesheet.
How the calculation works
Flexbox (the flexible box layout) is the CSS system for laying items out in a row or column and controlling alignment and spacing. Pick the main properties and this tool shows a live preview and generates the container CSS. โข flex-direction: the direction items are laid out (row, column; -reverse flips the order) โข justify-content: alignment and spacing along that direction (the main axis) โข align-items: alignment across it (the cross axis) โข flex-wrap: whether items wrap onto new lines โข gap: spacing between items For justify-content, space-between pushes the first and last items to the edges with equal gaps between; space-around gives each item equal space on both sides; space-evenly makes every gap, including the edges, the same.
Worked example
A centred row with 12px gaps .container { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 12px; } For a header with the logo on the left and menu on the right, justify-content: space-between is the usual choice.
Things to be aware of
- With flex-direction: column, justify-content controls vertical placement and align-items horizontal placement โ they swap.
- gap works with Flexbox in all major browsers; margins used to be the usual way to space items.
- For two-dimensional layouts aligned in both rows and columns, CSS Grid is a better fit.
FAQ
What's the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the flex-direction), while align-items controls alignment along the cross axis (perpendicular to the main axis).
What does changing the item count do?
It changes how many boxes appear in the preview, making it easier to see how wrapping and justify-content behave. It has no effect on the generated CSS code.
Can I set align-self on individual items?
No, the current version only generates properties for the container as a whole.