A flex container has justify-content: space-between, but one of its items also has margin-left: auto and the spacing comes out wrong. How do auto margins interact with alignment on a flex item?

## Auto margins are a free-space claim Outside flexbox, `margin: 0 auto` on a block with a declared width centres it, and `margin-top: auto` does nothing. Inside a flex container the rule is uniform and stronger: on either axis, an `auto` margin absorbs free space. It is the only per-item way to move a single flex item along the main axis, since flexbox has no `justify-self`. Two consequences follow immediately. First, `auto` margins never collapse in a flex container — margin collapsing does not happen between flex items at all. Second, they are greedy: they take *all* the positive free space on their axis, split equally between however many `auto` margins are present on that line. ## The ordering that explains the bug The flex layout algorithm runs in a fixed order. Simplified to what matters here: 1. Resolve each item's main size, letting items grow or shrink as their flex factors dictate. 2. If positive free space remains on the line and at least one main-axis margin is `auto`, distribute all of that free space equally among those `auto` margins. 3. Only then align the items with `justify-content`. Step 2 happens before step 3, and it leaves nothing behind. That is the whole explanation for the reported symptom: `justify-content: space-between` is asked to distribute zero free space, hits the specified fallback for a non-positive remainder, and packs items at the main-start edge. What you observe is a single wide gap in front of the item that carries the `auto` margin, with all the other items shoulder to shoulder — which reads as "space-between stopped working". ```css .bar { display: flex; justify-content: space-between; } .bar .actions { margin-left: auto; } /* eats the free space; space-between now inert */ ``` There is a related consequence of step 1: if any item is growing to fill the line, there is no positive free space by the time step 2 runs, so the `auto` margin gets nothing and appears to be ignored. Two mechanisms are competing for the same remainder, and whichever runs first wins. ## The cross axis The same principle applies perpendicular to the flow, with one extra rule that catches people out: if a flex item has an `auto` margin on the cross axis, its `align-self` has no effect. The margin claims the free cross space and positions the item, and the alignment value is simply skipped. So `margin-block: auto` on an item in a row-direction container centres it vertically regardless of the container's `align-items`, and `margin-top: auto` pins it to the bottom. An `auto` cross margin also cancels stretching, because stretch only applies to an item with an `auto` cross size *and* no `auto` cross margins. ## Why the mechanism is worth keeping Despite the trap, auto margins remain the correct tool for a very common shape: moving one item away from the group without changing the container's alignment for everyone else. Because they act on a single item, they survive items being added or removed around them in a way that hand-tuned padding does not. The discipline is to keep the two mechanisms apart: - Distributing space between **all** items is `justify-content`'s job. - Offsetting **one** item within the line is an `auto` margin's job. - Guaranteeing a minimum separation between neighbours is `gap`'s job, and `gap` is subtracted before free space is computed, so it coexists with either of the other two. Mixing the first two on the same axis of the same container is what produces the bug in the question. The fix is to delete one of them — usually the `justify-content` value, because the `auto` margin was the deliberate intent — and let the remaining mechanism own the free space. ## Diagnosing it in the wild When `justify-content` looks inert, check three things in order: whether there is positive free space at all, whether any item on the line carries an `auto` margin on that axis, and whether an item is growing and consuming the remainder. Inspecting the computed margin of each item resolves the second case instantly — a computed margin far larger than anything in your stylesheet is an `auto` that has been fed.