New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 2 users

Issue metadata

Status: Fixed
Closed: May 2017
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

issue 722287

Sign in to add a comment

space-evenly misbehaves with flexbox

Reported by, Apr 4 2017 Back to list

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:52.0) Gecko/20100101 Firefox/52.0

Steps to reproduce the problem:
1. Open the attached test case

What is the expected behavior?
You should see a green box.

What went wrong?
You see a red box instead.

Did this work before? No 

Does this work in other browsers? No
 This works in Firefox, but fails in Chrome and Safari

Chrome version: 59  Channel: n/a
OS Version: OS X 10.11
Flash Version: Shockwave Flash 25.0 r0

"justify-content: space-evenly" is implemented for grid layout, but not for flexbox, where instead it behaves as flex-start.

However, since it parses correctly, it is not possible to use the cascade (or @supports) fallback on some other value, making something like this unusable:

.foo {
  display: flex;
  justify-content: space-around; /* fallback if the next line is not supported */
  justify-content: space-evenly;

Ideally, space-evenly should be implemented in full for flexbox as well (mozilla already has it), but if that's too consuming for a quick fix, as a stop gap measure, using its default fallback alignment (center) would be much better than flex-start. Using space-around would probably be OK as well, as these two values are somewhat close.

I've attached a test-case (also submitted to wpt that currently fails, and would pass if either a full implementation was done, or if a fallback to either center or space-around was implemented instead.
1.1 KB View Download

Comment 1 by, Apr 4 2017

Components: -Blink>CSS Blink>Layout>Flexbox
Status: Untriaged

Comment 2 by, Apr 6 2017

Labels: -Type-Bug -Pri-2 Pri-3 Type-Compat
Status: Assigned
To cbiesinger for further triage.
Labels: -OS-Mac OS-All
None of the "new" keywords from css-align are implemented for flexbox yet.

see also  bug 507690 

Comment 4 by, Apr 10 2017

Note that there was an old patch from @jfernandez adding some support that was finally abandoned:
Probably it'd be a good moment to bring it back to life.

Comment 5 by, Apr 19 2017

Labels: -Type-Compat -Pri-3 Pri-2 Type-Bug
This came up again at the CSS WG meeting in Tokyo. We should make sure to add support for this in flexbox as we're shipping support for it in grid now.
Status: Started
I'll start working on this, if @cbiesinger don't oppose. I'd need some help for reviews, though.
Happy to review a patch for this!

Comment 8 Deleted

Blocking: 722287
Project Member

Comment 12 by, May 24 2017

The following revision refers to this bug:

commit 69568ed51b77ef4a94d96f99134e09223acf6223
Author: jfernandez <>
Date: Wed May 24 10:04:53 2017

[css-flex] Implement the space-evenly content-distribution value

The CSS Box Alignment specification defines the <content-distribution>
set as some of the allowed values for the Content Distribution
properties, align-content and justify-content. The 'space-evenly' value
is not among the ones allowed for these properties according to the CSS
Flexible Box specification.

The CSS Flexbible box specification states that it must follow the CSS
Box Alignment specification, so this new value must be considered as
part of an upgraded level of the spec, which should be implemented

Since we have already shipped an implementation of the new CSS Box
Alignment values for CSS Grid Layout, we need to implement it for
Flexbox as well.

This is the intent-to-implement-and-ship request approved for this

BUG= 708121 

Cr-Commit-Position: refs/heads/master@{#474237}


Status: Fixed
This issue should be FIXED now.
Project Member

Comment 14 by, May 24 2017

The following revision refers to this bug:

commit ff718d2ad190cf1f81256216c09d388b43f18319
Author: Christian Biesinger <>
Date: Wed May 24 22:39:39 2017

[css-flex] Mark some flexbox wpt tests as passing now (commit
69568ed51b77ef4a94d96f99134e09223acf6223) fixed some
of the imported tests; this marks them as passing.
BUG= 708121 

Change-Id: I076ab6b81e7c48886e664fb50175027708cfc919
Reviewed-by: Javier Fernandez <>
Commit-Queue: Christian Biesinger <>
Cr-Commit-Position: refs/heads/master@{#474455}

Sign in to add a comment