space-evenly-001.html (1117B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS Box Alignment: space-evenly & flexbox with single item</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <meta name=flags content=""> 7 <meta name=assert content="justify-content: space-evenly with flexbox and a single item must center it"> 8 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 9 <link rel=help href="https://drafts.csswg.org/css-align/#distribution-values"> 10 <link rel=help href="https://drafts.csswg.org/css-align/#fallback-alignment"> 11 <link rel=help href="https://drafts.csswg.org/css-flexbox-1/#justify-content-property"> 12 <style> 13 .red { 14 position: absolute; 15 z-index: -1; 16 width: 100px; 17 height: 100px; 18 background: red; 19 } 20 .container { 21 margin-left: -100px; 22 width: 300px; 23 display: flex; 24 justify-content: space-evenly; 25 } 26 .container div { 27 width: 100px; 28 height: 100px; 29 background: green; 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 <div class=red></div> 35 <div class=container><div></div></div>