CSS Flexbox Generator
Set the flex container properties, watch the preview update, and copy either plain CSS or the equivalent Bootstrap 5 utility classes.
Container properties
Live preview
Items have different sizes so you can see how alignment and wrapping behave.
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}<div class="d-flex flex-row flex-nowrap justify-content-start align-items-stretch gap-3">
<div class="p-3 border">Item 1</div>
<div class="p-3 border">Item 2</div>
<div class="p-3 border">Item 3</div>
<div class="p-3 border">Item 4</div>
</div>What is CSS flexbox?
CSS flexbox, the Flexible Box Layout module, is a one-dimensional layout system for arranging items in a row or a column. You set display: flex on a container, then control the direction, wrapping, spacing and alignment of its children with a handful of properties. It is widely used to centre content, build navigation bars and space out buttons or cards.
How to use the flexbox generator
- 1
Choose flex-direction and flex-wrap to set the main axis and whether items can wrap onto new lines.
- 2
Use justify-content to distribute items along the main axis and align-items to position them on the cross axis.
- 3
If wrapping is on, use align-content to space the lines. Set the gap between items with the slider.
- 4
Change the number of items to see how the layout responds.
- 5
Copy the CSS for a custom stylesheet, or the Bootstrap 5 HTML if your project uses Bootstrap.
Flex container properties
| Property | What it controls | Values |
|---|---|---|
| flex-direction | The main axis: items flow in a row or a column | row, row-reverse, column, column-reverse |
| flex-wrap | Whether items can wrap onto more lines | nowrap, wrap, wrap-reverse |
| justify-content | Spacing of items along the main axis | flex-start, center, flex-end, space-between, space-around, space-evenly |
| align-items | Position of items on the cross axis | stretch, flex-start, center, flex-end, baseline |
| align-content | Spacing of wrapped lines on the cross axis | stretch, flex-start, center, flex-end, space-between, space-around |
| gap | Space between neighbouring items | Any length, such as 16px or 1rem |
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content positions items along the main axis, which runs horizontally when flex-direction is row. align-items positions them along the cross axis, which runs vertically for a row. When you switch to column, the two axes swap.
When should I use flexbox instead of CSS grid?
Use flexbox for one-dimensional layouts where items flow in a single row or column, such as navigation bars, button groups and toolbars. Use CSS grid when you need to control rows and columns at the same time, such as page layouts and card galleries.
How do the Bootstrap 5 classes map to the CSS?
Each property has a utility class: d-flex sets display: flex, flex-column sets the direction, justify-content-between and align-items-center set alignment, and gap-3 sets the gap. The gap slider uses Bootstrap's default spacer scale (0, 4, 8, 16, 24 and 48 px at a 16px root font size), so the gap class matches the CSS exactly.
Why does align-content have no effect?
align-content only applies when items wrap onto more than one line, so it does nothing with flex-wrap: nowrap. It also needs spare space on the cross axis to distribute. That is why the generator only shows it when wrapping is turned on.
Related tools
Skip the layout fiddling
Canvas Builder writes the responsive flex/grid layout for an entire page: no manual CSS.