gap-011.html (925B)
1 <!DOCTYPE html> 2 <title>Flex gaps</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-line-break"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name="assert" content="Gaps are respected when gathering items into lines for row flexboxes." /> 8 9 <style> 10 .item { 11 width: 100px; 12 height: 50px; 13 flex: 0 0 auto; 14 background: green; 15 } 16 #reference-overlapped-red { 17 position: absolute; 18 background-color: red; 19 width: 100px; 20 height: 100px; 21 z-index: -1; 22 } 23 </style> 24 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 27 <div id=reference-overlapped-red></div> 28 29 <div style="display: flex; width: 200px; column-gap: 50px; flex-flow: row wrap"> 30 <div class=item></div> 31 <div class=item></div> 32 </div>