CSS Flexbox Generator

Understanding the Generated CSS

The generator outputs a .container rule with seven declarations: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, and gap. Paste it into your stylesheet and rename .container to your own class name. Every property is written out, even at its default, so you can delete the lines you do not need. The drop-downs start at the CSS initial values: row, nowrap, and normal for justify-content, align-items and align-content. In a flex container normal stretches items and wrapped lines on the cross axis and packs items at the start of the main axis (CSS Box Alignment Level 3). Those three lines therefore behave as if they were not written. The gap: 1rem line is different: the initial gap of a flex container is normal, which is 0, so the default rule adds 1rem between the items. Delete that line if you do not want the space. The default output is:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  gap: 1rem;
}

Example: a Navigation Bar

Keep row and nowrap, set justify-content to space-between, align-items to center and gap to 16px:

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

Take a 600px container with three 100px items. The gaps use 32px, so 268px of free space is left for justify-content to share out. With space-between the items start at 0, 250 and 500px: the first and last items touch the edges and the free space goes between them, on top of the gaps. With space-around they start at 44.67, 250 and 455.33px (half-size space at the ends), and with space-evenly at 67, 250 and 433px (equal space everywhere). The align-content line does nothing here because the container does not wrap; you can delete it.

Example: Tags That Wrap

Set flex-wrap to wrap, align-items to flex-start, align-content to center, and gap to 8px 12px:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: flex-start;
  align-content: center;
  gap: 8px 12px;
}

Here align-content matters. In a 200px-tall container whose three 40px items fit on one line, the line moved down to 80px from the top. The same settings with nowrap left the items at the top, because a single-line flex container ignores align-content (CSS Flexbox Level 1 §8.4).

Limits and Common Surprises

• Container properties only. There are no controls for the items: flex-grow, flex-shrink, flex-basis, order and align-self must be added by hand. A common next step is flex: 1 on the item that should take the remaining space.
• Long words do not shrink. A flex item’s minimum width is auto, its longest unbreakable content. In a 300px row, an item holding a long URL stayed 684px wide and overflowed. Add min-width: 0 (plus overflow-wrap: anywhere or text-overflow) to that item.
• Missing values. justify-content has no stretch or start/end, and align-content has no space-evenly; type them into the copied CSS if you need them.
• Reverse directions change only the visual order. Keyboard focus and screen readers still follow the HTML order.
• The gap field is not validated: an invalid value is copied as written, and the browser drops it.

For layouts that need rows and columns at once, use the CSS grid generator.

Flexbox vs Grid

Use Flexbox when you have a one-dimensional layout — items along a single row or column. Use CSS Grid when you need two-dimensional control over both rows and columns simultaneously. In practice, Flexbox excels at component-level layout (navigation, button groups, form rows), while Grid is better for page-level structure.