CSS Flexbox Generator

Lay out items with CSS flexbox by picking options instead of remembering them. Set the container's direction, wrapping, alignment, and gap, tune each item, and copy the CSS and HTML.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS
HTML

How to use the Flexbox Generator

  1. Set flex-direction, flex-wrap, justify-content, align-items, align-content, and gap, or pick a preset.
  2. Under Items, add or remove items and change their flex-grow, flex-shrink, flex-basis, order, and align-self.
  3. Copy the CSS and the HTML.

How it works

  • justify-content places items along the main axis (the direction), and align-items across it.
  • align-content only matters when items wrap onto several lines.
  • An item's size starts at flex-basis, then grows by its share of flex-grow when there is spare room, or shrinks by flex-shrink when there isn't.
  • The output writes only values that differ from the defaults, and uses the flex shorthand for items.

Examples

Sidebar and content (Sidebar + content preset):

.container {
  display: flex;
  gap: 16px;
}

.item-1 {
  flex: 0 0 200px;
}

.item-2 {
  flex: 1 1 0;
}

Centering anything: display: flex; justify-content: center; align-items: center;

Limitations

  • Flexbox lays out one direction at a time. For two-dimensional layouts such as page grids, CSS Grid is often simpler.
  • order changes the visual order only; keyboard and screen reader order still follow the HTML. Avoid reordering meaningful content.

Frequently asked questions

How do I center an element with flexbox?

On the parent, set display: flex, justify-content: center, and align-items: center. Use the Centered preset.

What does flex: 1 mean?

It is short for flex: 1 1 0: the item grows and shrinks and starts from zero width, so items with flex: 1 share space equally.

What is the difference between align-items and align-content?

align-items aligns items within each line. align-content spaces the lines themselves and only works when items wrap.

Is anything uploaded?

No. The CSS is built in your browser.

Often used together with the Flexbox Generator.