Distribute Items with space-between

Even Distribution with space-between

justify-content: space-between is one of the most useful alignment values in Flexbox. It distributes items so that the first item sits at the start, the last item sits at the end, and all remaining space is evenly divided between adjacent items.

CSS Code

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

How It Works

The browser calculates the total free space in the container (container width minus the total width of all items), then divides it equally among the gaps between items. With N items, there are N-1 gaps.

Visual Result

|Item1          Item2          Item3|
|<---gap--->    <---gap--->        |

space-between vs space-around vs space-evenly

Value	Behavior
space-between	Equal gaps between items; no space at edges
space-around	Equal space around each item; half-space at edges
space-evenly	Equal space everywhere, including edges

Practical Considerations

• With only one item, space-between behaves like flex-start (the item sits at the start).
• With two items, they push to opposite ends of the container.
• When items wrap to multiple lines, each line distributes independently.

Common Pitfall

When the last row of a wrapped grid has fewer items than other rows, space-between creates uneven gaps. For grid-like layouts with consistent spacing, consider CSS Grid or use fixed widths with gap instead.