Skip to content
Toolden

TOOLDENDEVELOPERON-DEVICE

CSS Flexbox Generator

Build a flexbox layout visually, direction, justification, alignment, wrapping and gap, and copy the generated CSS and HTML into your project.

Arrange direction, alignment, wrap and boxes. The preview and code update live in the results.
1
2
3
4

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

HTML

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Targets .flex-container. Main axis is justify, cross axis is align.

HOW TO USE

  1. 1Choose the flex direction: row, row-reverse, column or column-reverse.
  2. 2Set how items are distributed on the main axis with justify-content and on the cross axis with align-items.
  3. 3Toggle wrapping and the gap between items, and set how many boxes the layout holds.
  4. 4Copy the CSS and HTML with one click. The CSS targets .flex-container and the HTML matches.

EXAMPLE

INPUT

direction: column, justify: space-between, align: center, wrap: nowrap, gap: 12px

OUTPUT

display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 12px;

FAQ

What is the difference between justify-content and align-items?
justify-content distributes items along the main axis (the flex-direction), while align-items places them along the cross axis. In a row, justify is horizontal and align is vertical.
Why does align-items: stretch not seem to do anything?
Stretch is the default and only shows when items have no explicit height. The preview boxes are sized, so give items a height and use center, flex-start or flex-end to see cross-axis changes clearly.
When should I use flex-wrap?
With wrap, items flow onto new lines when the container is too narrow. It is the easiest way to make a flex layout responsive without media queries.
Does the generator produce a responsive layout?
The code is a single flex layout. For breakpoints, wrap the generated CSS in a media query or adjust the gap and wrap rules there.
Is my data sent anywhere?
No. All code is generated entirely in your browser, your settings never leave your device.

RELATED TOOLS

CSS Grid Generator↗CSS Gradient Generator↗Color Palette from CSS↗