Flexbox Generator

Flexbox in terms of two axes

Flexbox lays children out along a main axis and sizes them across a cross axis. The direction of the main axis comes fromflex-direction: row runs left to right,column runs top to bottom. This matters because the two alignment properties people mix up are tied to the axes, not to the words "horizontal" and "vertical".justify-content distributes items along the main axis, and align-items positions them on the cross axis.

The property that confuses everyone

In a row container, justify-content moves items left and right while align-items moves them up and down. Flip to column and the roles swap: nowjustify-content is the vertical one. The classic "center a thing both ways" trick leans on both at once.

Example

Perfectly centered content:

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

A navbar with a logo on the left and links on the right:

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

FAQ

Why do my items overflow instead of wrapping? Flex items stay on one line until you add flex-wrap: wrap. By default they shrink to fit, and once they cannot shrink further they spill out.

What does flex: 1 mean? It is shorthand forflex-grow: 1; flex-shrink: 1; flex-basis: 0, telling an item to take an equal share of free space. Give one childflex: 2 and it claims twice the slack of its siblings.

Flexbox or grid? Flexbox is one-dimensional, best for a row or a column of items. When you need rows and columns to line up together, grid is the better fit.