Justify Content Space Evenly: Browser Support, Usage, Issues

What is justify-content: space-evenly?

justify-content: space-evenly is a CSS keyword from the W3C CSS Box Alignment Module Level 3. It places items along the main axis of a flex, grid, or multicol container so that the gap between any two adjacent items, the gap before the first item, and the gap after the last item are all the same.

Which browsers does justify-content: space-evenly support?

Every modern browser supports justify-content: space-evenly, with global coverage around 96%. Chrome, Edge, Firefox, Safari, Opera, Samsung Internet, and the modern Android Browser all render the keyword on flex, grid, and multicol containers. Internet Explorer is the only mainstream browser that never added support.

How do you use justify-content: space-evenly?

Set display: flex or display: grid on the parent, then add justify-content: space-evenly. The parent must have free space along the main axis, otherwise the keyword has nothing to distribute and the items collapse to flex-start.

• Pick a flex or grid container: Add display: flex or display: grid to the parent element that holds the items you want to space.
• Set the main-axis direction: For a flex row, leave flex-direction at the default. For a vertical stack, set flex-direction: column. The justify-content axis follows flex-direction.
• Apply the keyword: Add justify-content: space-evenly to the same parent. Drop any conflicting margin auto on the children, since auto margins absorb the free space first.
• Confirm the parent has free space: Give the parent a width or min-height that exceeds the total size of the children. With zero free space, every justify-content value renders the same.
• Add a fallback for IE 11: Pair the rule with margin: auto on each child or precomputed padding so legacy browsers approximate the spacing.
• Verify in DevTools: Inspect the parent, switch to the Computed tab, and check that justify-content reads space-evenly. If it reads flex-start, the parent is not a flex or grid container.

// Paste this into the DevTools console to confirm space-evenly support in this browser.
const probe = document.createElement("div");
probe.style.display = "flex";
probe.style.justifyContent = "space-evenly";

const computed = getComputedStyle(probe).justifyContent;

if (computed === "space-evenly") {
  console.log("justify-content: space-evenly is supported in this browser.");
  console.log("Computed value on the test element:", computed);
} else {
  console.log("justify-content: space-evenly is NOT supported. Falling back to:", computed || "flex-start");
}

// Optional: render a live demo strip to eyeball the spacing.
const demo = document.createElement("div");
demo.style.cssText = "display:flex; justify-content:space-evenly; width:300px; padding:8px; border:1px solid #888;";
["A", "B", "C"].forEach(label => {
  const item = document.createElement("span");
  item.textContent = label;
  item.style.cssText = "padding:4px 8px; background:tomato; color:#fff;";
  demo.appendChild(item);
});
document.body.appendChild(demo);

If the console prints that space-evenly is not supported, the browser is IE 11, legacy EdgeHTML, or a pre-Firefox 52 build. Every Chromium, Gecko, and WebKit release in active use logs a positive result.

What are the known issues with justify-content: space-evenly?

justify-content: space-evenly is well supported on modern engines, but a small set of cross-browser quirks still bite real layouts. The common pain points are overflow behavior, IE fallbacks, RTL surprises, and Safari-flex edge cases.

• Overflow un-centers content: When the combined size of the items exceeds the container, space-evenly stops centering and pins items to the start, which clips the first item on small screens. The DEV community fix is to wrap the row, or to swap to safe center plus overflow auto.
• IE 11 silently falls back to flex-start: Internet Explorer 10 and 11 ignore the keyword without warning, so the layout shifts left in IE only. Always pair the rule with margin: auto on every child or a precomputed padding fallback for IE-era audiences.
• Single-item containers behave differently from space-around: With one child, space-evenly centers it and space-around centers it too, so swapping values feels safe. With two children, space-evenly puts a third of the free space at each edge while space-around puts a quarter, which is easy to misread visually.
• RTL flips the visual order: In a right-to-left direction, the main axis reverses, so the first DOM child sits on the right. space-evenly still distributes equally, but designers often expect the same DOM order to render the same way, which it does not.
• Older Safari grid containers ignore it: Safari 10.1 added space-evenly for flex only, not grid. A grid layout that relies on the keyword in Safari 10.1 falls back to start.
• CSS validators flag the value: Some legacy CSS validators report a "value [space-evenly] is not a valid value" error because they were last updated before Box Alignment Module Level 3 stabilised. The browsers parse the value correctly even when the linter does not.
• Margin auto wins over space-evenly: If any flex child has a margin set to auto, the auto margin absorbs the free space first and space-evenly has nothing left to distribute. Drop the auto margin or move the spacing rule to a different child set.

In my experience, the trickiest production failure is overflow on mobile viewports. A nav bar that looks centered on a 1440px desktop drops behind the left edge on a 360px Android phone, because space-evenly stops centering once the items overflow. Always test the row at a 320 to 360px width on a real device before assuming the desktop result is the truth.

Citations

All justify-content: space-evenly version numbers and platform notes in this guide come from these primary sources:

• W3C - CSS Box Alignment Module Level 3: w3.org/TR/css-align-3
• W3C - CSS Flexible Box Layout Module Level 1: w3.org/TR/css-flexbox-1
• W3C - CSS Working Group: w3.org/Style/CSS
• MDN Web Docs - justify-content: developer.mozilla.org/en-US/docs/Web/CSS/justify-content
• MDN Web Docs - CSS Box Alignment: developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment
• Mozilla Hacks - Flexbox cheatsheet: hacks.mozilla.org/2018/11/css-flexbox-and-css-grid
• Chrome for Developers - Flexbox in 2017: developer.chrome.com/blog/new-in-chrome-60
• Chrome Platform Status - CSS justify-content space-evenly: chromestatus.com/features#justify-content
• WebKit - Feature status: webkit.org/status
• Wikipedia - CSS Flexible Box Layout: en.wikipedia.org/wiki/CSS_Flexible_Box_Layout
• DEV Community - space-evenly overflow fix: dev.to/janeori/css-fix-when-justify-content-space-evenly-overflows
• Microsoft Learn - Edge developer documentation: learn.microsoft.com/en-us/microsoft-edge/web-platform