--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
@@ -100,16 +100,30 @@
            /><div class="b" style="margin-left: 70px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: calc(40px / 6)"
            /><div class="b" style="margin-left: calc(40px / 3)"
            /><div class="c" style="margin-left: calc(40px / 3)"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(140px / 3)"
+           /><div class="b" style="margin-left: calc(140px / 3)"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 10px"
+           /><div class="b" style="margin-left: 10px"
+           /><div class="c" style="margin-left: 10px"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
@@ -97,16 +97,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml
@@ -103,16 +103,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml
@@ -114,16 +114,30 @@
            /><div style="margin-left: 59px"><div class="b"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: calc(8px / 6)"
            /><div style="margin-left: calc(8px / 3)"><div class="b"/></div
             ><div style="margin-left: calc(8px / 3)"><div class="c"/></div>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(118px / 3)"
+           /><div style="margin-left: calc(118px / 3)"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 2px"
+           /><div style="margin-left: 2px"><div class="b"/></div
+            ><div style="margin-left: 2px"><div class="c"/></div>
+    </div>
+
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml
@@ -110,16 +110,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml
@@ -96,16 +96,27 @@
     </div>
     <div class="flexbox" style="margin-left: 77.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-left: 55px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-left: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="margin-left: 100px">
       <div class="a"/>
     </div>
     <div class="flexbox" style="margin-left: 100px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-left: 100px">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml
@@ -105,16 +105,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml
@@ -108,16 +108,27 @@
     </div>
     <div class="flexbox" style="margin-left: 66.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-left: 39px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-left: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="margin-left: 100px">
       <div class="a"/>
     </div>
     <div class="flexbox" style="margin-left: 100px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-left: 100px">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml
@@ -116,16 +116,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
@@ -130,16 +130,43 @@
       <div class="a"/>
       <div style="flex: 1"/>
       <div class="b"/>
       <div style="flex: 1"/>
       <div class="c"/>
       <div style="flex: 0.5"/>
     </div>
 
+    <!-- space-evenly -->
+    <!-- Center "a" here just as we did above in the "center" case. -->
+    <div class="centerParent">
+      <div class="flexbox center">
+        <div class="a"/>
+      </div>
+    </div>
+    <!-- As above with space-around, we'll use a flex container with invisible
+         flexible items instead of packing space. -->
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 1"/>
+      <div class="a"/>
+      <div style="flex: 1"/>
+      <div class="b"/>
+      <div style="flex: 1"/>
+    </div>
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 1"/>
+      <div class="a"/>
+      <div style="flex: 1"/>
+      <div class="b"/>
+      <div style="flex: 1"/>
+      <div class="c"/>
+      <div style="flex: 1"/>
+    </div>
+
+
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
@@ -95,16 +95,28 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
@@ -98,16 +98,30 @@
            /><div class="b" style="margin-top: 70px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: calc(40px / 6)"
            /><div class="b" style="margin-top: calc(40px / 3)"
            /><div class="c" style="margin-top: calc(40px / 3)"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(140px / 3)"
+           /><div class="b" style="margin-top: calc(140px / 3)"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 10px"
+           /><div class="b" style="margin-top: 10px"
+           /><div class="c" style="margin-top: 10px"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
@@ -99,16 +99,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml
@@ -100,16 +100,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml
@@ -111,16 +111,30 @@
            /><div style="margin-top: 64px"><div class="b"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: calc(8px / 6)"
            /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div
             ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(118px / 3)"
+           /><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 2px"
+           /><div style="margin-top: 7px"><div class="b"/></div
+            ><div style="margin-top: 8px"><div class="c"/></div>
+    </div>
+
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml
@@ -112,16 +112,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml
@@ -94,16 +94,27 @@
     </div>
     <div class="flexbox" style="margin-top: 77.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-top: 55px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-top: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="margin-top: 100px">
       <div class="a"/>
     </div>
     <div class="flexbox" style="margin-top: 100px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-top: 100px">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml
@@ -108,16 +108,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml
@@ -105,16 +105,27 @@
     </div>
     <div class="flexbox" style="margin-top: 66.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-top: 39px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-top: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="margin-top: 100px">
       <div class="a"/>
     </div>
     <div class="flexbox" style="margin-top: 100px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-top: 100px">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml
@@ -119,16 +119,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml
@@ -93,16 +93,27 @@
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml
@@ -102,16 +102,27 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
     <!-- left -->
     <div class="flexbox" style="justify-content: left">
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: left">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: left">