CSS Flexbox Generator

Using the CSS Flexbox Generator

Main axis and cross axis

Flexbox lays items along a main axis, set by flex-direction: left to right for row, top to bottom for column. justify-content distributes items along the main axis; align-items positions them on the cross axis. Switch direction and the two properties swap roles.

Distributing space

space-between pushes the first and last items to the edges with equal space between the rest, ideal for a header with a logo on one side and links on the other. space-evenly gives equal space everywhere, including the edges. center keeps everything together in the middle.

Wrapping

By default flex items squeeze onto one line. flex-wrap: wrap lets them flow onto new lines when there is no room, which is what you want for tags, chips and button groups on small screens.

Use gap

gap adds space between items only, never at the edges, and works on wrapped rows too. It replaces the old margin-and-negative-margin tricks.

Sizing the items

This generator styles the container. The size of each item comes from its content plus the item properties: give items flex: 1 to share the row equally, flex: none to keep their natural size, or a flex-basis such as 200px as a starting width. The flexbox cheat sheet lets you try each item property live.

Frequently asked questions