CSS

Flexbox Generator

Adjust the controls to configure your flex container. Copy the CSS when it looks right.

Result

CSS 

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

Related Tools

Arrange items in a row or column

Choose a direction, alignment, wrapping, and gap. The preview shows how those container settings affect five sample items. Copy the generated .flex-container rule into your stylesheet and apply that class to the parent element.

Understand the two axes

justify-content distributes space along the main axis. align-items aligns items across it. Changing from row to column changes which axis each property controls.

For a navigation row, try row, space-between , center, and a 16px gap: 

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

Check with your own content

  • gap adds space between items without adding an outer margin.
  • align-content distributes wrapped lines when there is spare space on the cross axis. It has no effect on a single-line flex container.
  • Child widths, content, and flex values affect shrinking and wrapping. Those item settings are not exported by this tool.
  • If a row item refuses to shrink, check its automatic minimum size. min-width: 0 can help, but long text still needs an appropriate wrapping or overflow rule.
  • Reversing the visual direction does not change the document’s reading or keyboard order. Check that both remain understandable.

Use the CSS Grid Generator when your layout needs aligned rows and columns.

← Back to CSS Tools