In a flex container, how do justify-content: space-between, space-around, and space-evenly differ in where they put the leftover main-axis space?

## What the property actually does `justify-content` is a container-level property that positions flex items along the **main axis** — the axis items are laid out along. It never resizes anything. Its whole job is to decide what happens to space the items did not use, so everything about it follows from one quantity: the free space on the line. ## Free space When the browser lays out a flex line it first resolves every item's main size, then adds up those sizes plus every item's main-axis margins, borders and padding, plus every `gap` between adjacent items. It subtracts that total from the line's main size. What is left is the free space. ```css .row { display: flex; width: 500px; } .row > div { width: 100px; } /* two items → free space = 500 - 200 = 300px */ ``` If the free space is zero — the items exactly fill the line — `justify-content` has nothing to give away and every value looks identical. This is the single most common reason it "does nothing". ## The three distribution values With **n** items and **F** free space: - **`space-between`** — F is split into the n−1 gaps *between* items: each gap is F/(n−1). Nothing is placed before the first item or after the last, so those items sit flush against the container's content edges. With the 500px example above and two 100px items: `0 | 300 | 0`. - **`space-around`** — every item is allotted F/n of space, split half before it and half after it. Two neighbouring items therefore contribute a half each, making the inner gap F/n, while the outer edges only get one half, F/2n. Same example: `75 | 150 | 75`. - **`space-evenly`** — the n+1 gaps (both edges plus every interior gap) are all equal at F/(n+1). Same example: `100 | 100 | 100`. The useful mental shortcut is to count the gaps: `space-between` counts n−1, `space-evenly` counts n+1, and `space-around` counts n but pays only half of it at each end. ## The packing values, for contrast `flex-start`, `flex-end` and `center` do not distribute at all — they push the whole group of items to one end or to the middle and leave the free space as one solid block. The initial value of `justify-content` is `normal`, which in a flex container behaves as `flex-start`, which is why items pack toward the main-start edge until you say otherwise. ## Negative free space When items overflow the line the free space is negative, and the specification defines explicit fallbacks so the result stays sane: - `space-between` behaves as `flex-start`, - `space-around` and `space-evenly` behave as `center`. `space-between` also behaves as `flex-start` when there is only one item, and `space-around`/`space-evenly` behave as `center` in that case. That last rule surprises people who assume a lone item under `space-between` will centre itself. The `center` fallback has a practical consequence: a centred overflowing row spills equally out of both ends, and the part that spills past the start edge cannot be scrolled to. The `safe` keyword (`justify-content: safe center`) exists precisely to force a `start` fallback in that case, though its browser support is more recent than the base values. ## Interaction with gap and auto margins `gap` is subtracted *before* the free space is computed, so `gap: 16px` with `space-between` means "at least 16px between items, plus whatever leftover space there is" — the two add up rather than competing. An `auto` margin on any item is greedier still: auto margins absorb all remaining positive free space before `justify-content` is consulted, which leaves the distribution values with nothing to hand out. ## Choosing between them `space-between` is the right pick when the outer items should anchor to the container edges — a header with a logo on the left and actions on the right. `space-evenly` gives the most even visual rhythm and is usually what designers mean by "spread these out". `space-around` produces that half-size edge gap that almost nobody asks for on purpose, so reach for it only when you actually want the items to look inset. In all three cases, add an explicit `gap` if the layout must keep a minimum separation at narrow widths, because at zero free space these values collapse to items touching each other.