Flexbox generator and playground

How to use it

1. In the Container block choose flex-direction, flex-wrap, justify-content, align-items, align-content and gap. Use the “−” and “+” buttons to set 1 to 8 items.
2. Click any item in the preview (or select it with Tab and Enter) — its flex-grow, flex-shrink, flex-basis, align-self and order fields appear.
3. Watch the axes: justify-content works along the main axis and align-items along the cross axis; flex-direction changes which way those axes point.
4. Press “Copy”. The code contains the .container rule plus .item:nth-child(N) rules only for items that have non-default values.

How it works

Container and items

An element with display: flex becomes a flex container and its direct children become flex items. The container sets the general rules (flex-direction, justify-content, align-items, gap), while each item is controlled by its own properties (flex-grow, flex-basis, align-self, order).

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

Main axis and cross axis

With flex-direction: row the main axis runs left to right and the cross axis runs top to bottom; with column they swap. justify-content distributes items along the main axis (flex-start, center, space-between, space-evenly), while align-items aligns them along the cross axis. The default align-items value is stretch: items grow to fill the container along the cross axis.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

flex-grow, flex-shrink and flex-basis

flex-basis is the starting size of an item (with auto it uses width or the content size). If the container has free space left, flex-grow shares it out in proportion; if there is not enough room, flex-shrink squeezes the items. An item with flex-grow: 0 does not take extra space, and one with flex-shrink: 0 never shrinks.

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

flex-wrap, gap and align-content

By default flex-wrap: nowrap keeps every item on one line and shrinks them when space runs out. With wrap, items move onto new lines. Once there are several lines, align-content decides how those lines are distributed inside the container; on a single-line container it has no effect. For spacing between items use gap instead of margin — there is no extra space left at the edges.

align-self and order

align-self overrides the cross-axis alignment for a single item without touching the others. order rearranges items visually without changing the HTML (the default is 0 and lower values come first). Keep in mind that order only changes how things look: tab order and screen readers still follow the HTML.

.item:nth-child(2) {
  align-self: flex-end;
  order: -1;
}

FAQ