flexbox-column-row-gap-004.html (1670B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing percentage gap resolution in flex containers</title> 9 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-align/#column-row-gap"> 11 <link rel="match" href="flexbox-column-row-gap-004-ref.html"> 12 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5081"> 13 <meta charset="utf-8"> 14 <meta name="assert" content="% row-gaps in a flexbox with indefinite block size are treated as 'normal'." /> 15 <style> 16 .flexContainer { 17 display: flex; 18 border: 2px solid black; 19 row-gap: 20%; 20 column-gap: 10%; 21 align-content: start; 22 justify-content: start; 23 margin-top: 20px; 24 } 25 .item { 26 border: 1px solid blue; 27 background: yellow; 28 width: 48px; 29 height: 48px; 30 flex: none; 31 } 32 .vertLR { 33 writing-mode: vertical-lr; 34 } 35 .rowWrap { 36 flex-flow: row wrap; 37 } 38 .colWrap { 39 flex-flow: column wrap; 40 } 41 .w50 { 42 width: 50px; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="flexContainer rowWrap w50"> 48 <div class="item"></div> 49 <div class="item"></div> 50 </div> 51 <div class="flexContainer colWrap w50"> 52 <div class="item"></div> 53 <div class="item"></div> 54 </div> 55 <div class="flexContainer vertLR rowWrap"> 56 <div class="item"></div> 57 <div class="item"></div> 58 </div> 59 <div class="flexContainer vertLR colWrap"> 60 <div class="item"></div> 61 <div class="item"></div> 62 </div> 63 </body> 64 </html>