⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

justify-content: space-between Explained (CSS)

Build a CSS flexbox layout visually: flex-direction, justify-content, align-items, flex-wrap and gap on the container, plus per-child flex-grow, flex-shrink and flex-basis, all with a live preview and copyable CSS.

Processing... 0%

Result

This page opens the generator with justify-content set to space-between: the first box sits flush against the container's start edge, the last box sits flush against its end edge, and the leftover space is divided into equal gaps between the boxes in the middle — never before the first one or after the last one.

That's the detail people mix up. space-around gives every box an equal margin on both of its sides, so the gaps between boxes end up twice as wide as the gaps at the two outer edges (each edge only gets one box's margin, not two). space-evenly goes further and makes every gap the same size, including the two outer edges — the only one of the three where the spacing looks perfectly uniform all the way across.

Switch the justify-content dropdown between the three values below and watch the same three boxes rearrange — it's the fastest way to see the difference instead of memorizing it. Copy the CSS for whichever one matches the spacing you actually want.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Container controls: flex-direction, justify-content, align-items, flex-wrap and a gap input in pixels, applied live to the preview.
  • Three color-coded child boxes by default (add up to eight, remove down to two), each with its own flex-grow, flex-shrink and flex-basis fields.
  • Copyable CSS block with a .flex-container rule plus one .flex-item-N rule per child that has non-default flex properties.

Key Benefits

✓ Every container control and every child's flex-grow, flex-shrink and flex-basis update three numbered preview boxes live, so you see exactly what your flexbox rules do before touching a stylesheet.
✓ The generator only prints child rules that actually differ from the CSS defaults, so the copied code stays short and readable instead of restating flex-grow: 0 on every box.
✓ Preset pages solve the layouts people search for by name: centering a div, a logo-left links-right navbar, and equal-width flexible columns — open one and the tool is already configured.

Use Cases

  • • Get the exact CSS to center a div both horizontally and vertically by watching justify-content and align-items work on live preview boxes.
  • • Build a logo-left, links-right navbar layout with space-between and align-items: center, then copy the container CSS straight into your header component.
  • • Compare space-between, space-around and space-evenly side by side on the same three boxes instead of guessing which one matches the spacing you want.