CSS Flexbox Generator

What is CSS flexbox?

Flexbox is a one-dimensional layout model: a flex container lays its children out along a single main axis — a row or a column — and lets them grow, shrink and align along it and along the perpendicular cross axis. It is the right tool for navigation bars, toolbars, card footers, media objects and centering; for two-dimensional page layouts where rows and columns must line up, use CSS Grid instead.

Container properties control the group: flex-direction sets the main axis, flex-wrap allows items to flow onto new lines, justify-content distributes free space along the main axis, align-items aligns items on the cross axis, align-content spaces wrapped lines, and gap adds gutters between items without margins.

Item properties control individuals: flex-grow decides how much of the leftover space an item takes, flex-shrink how much it gives up when space runs out, and flex-basis its starting size before either happens. The flex shorthand sets all three — flex: 1 means 1 1 0%, which makes items share space equally regardless of their content. align-self overrides the cross-axis alignment for one item and order changes its visual position.

How to use the CSS Flexbox Generator

1. Choose a direction, wrapping, main-axis (justify-content) and cross-axis (align-items) alignment, and set the row and column gaps.
2. Set the number of items and pick a preview size mode to see how alignment reacts to different item sizes.
3. Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, align-self and order. Customised items get a dashed border.
4. Start from a preset such as Navbar, Equal columns or Sidebar + main if you prefer.
5. Copy the container CSS, per-item CSS and HTML markup.

Example

A header with a logo on the left and navigation pushed to the right:

.header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header nav {
  margin-left: auto;
}

Flexbox tips and gotchas

• Flex items have min-width: auto by default, so long words or wide content can stop them from shrinking. Add min-width: 0 to the item to allow it.
• justify-content has no effect when an item has flex-grow — there is no free space left to distribute.
• An auto margin (margin-left: auto) absorbs free space and is the simplest way to push one item to the far end.
• order and *-reverse directions only change the visual order. Screen readers and keyboard focus still follow the HTML order, so avoid reordering meaningful content.
• align-content only works when items wrap onto more than one line.
• Use gap instead of margins between items. It is supported for flexbox in every current browser and never adds space at the edges.
• Make gaps and sizes fluid with the CSS Clamp Generator, and convert pixel values with PX to REM. For two-dimensional layouts switch to the CSS Grid Generator.