CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self visually, with live children and copyable CSS.

Container

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content only has an effect when items wrap onto several lines.

Number of items

Item 1

Select an item here or click it in the preview.

flex-grow

flex-shrink

order

flex-basis

align-self

Preview

Drag the bottom corner of the preview to resize the container.

CSS code

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

Related Tools

View All

CSS Box Shadow Generator CSS Gradient Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator CSS Animation Generator

What is CSS Flexbox Generator?

An interactive flexbox playground: set the container properties, add up to 12 child items and tune flex-grow, flex-shrink, flex-basis, order and align-self per item. The preview applies exactly the generated CSS.

How to use CSS Flexbox Generator

Set the container: flex-direction, flex-wrap, justify-content, align-items, align-content and gap.
Choose the Number of items shown in the preview.
Select an item (button or click in the preview) and set flex-grow, flex-shrink, flex-basis, order and align-self.
Resize the preview by dragging its corner to see how the layout reacts.
Copy the CSS code for .container and the .item-n rules.

Example

Input

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

Output

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

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

When to use CSS Flexbox Generator

Use flexbox for one-dimensional layouts: navigation bars, toolbars, button groups, media objects and centring. For two-dimensional page layouts with rows and columns at once, the CSS Grid Generator is usually the better tool.

How CSS Flexbox Generator works

The container always gets display: flex plus direction, wrap, justify-content and align-items. align-content is only written when items can wrap (it has no effect on a single line), and gap only when it is above 0. For items, only values that differ from the defaults are written: flex: grow shrink basis when not 0 1 auto, order when not 0 and align-self when not auto, as rules named .item-1, .item-2… An invalid flex-basis is flagged and ignored.

Common Use Cases

Centring content horizontally and vertically
Navigation bars with a pushed-right item
Equal-width columns with flex: 1
Wrapping tag or card lists
Reordering items visually with order

FAQs

Why is align-content missing from my CSS?

align-content only distributes lines of a wrapping flex container. With flex-wrap: nowrap there is a single line, so the tool leaves it out.

What does flex: 1 1 auto mean?

The item may grow (1) and shrink (1) from its automatic size. flex-grow decides how extra space is shared between items.

Does order affect accessibility?

order only changes the visual order. Screen readers and keyboard focus still follow the HTML source order, so do not use it for meaningful reordering.