flexbox-column-row-gap-002-ref.html (1590B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <!-- 7 Testcase for the correctness of gaps in vertical writing mode 8 multi-line flex containers. 9 --> 10 <html> 11 <head> 12 <title>Reference: Testing row and column gaps in vertical writing mode multi-line flex containers</title> 13 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> 14 <meta charset="utf-8"> 15 <style> 16 .flexContainer { 17 display: flex; 18 width: 220px; 19 height: 200px; 20 border: 1px solid black; 21 align-content: flex-start; 22 justify-content: flex-end; 23 float: left; 24 writing-mode: vertical-lr; 25 } 26 .rowWrap { 27 flex-flow: row wrap; 28 } 29 .columnWrap { 30 flex-flow: column wrap; 31 } 32 .item { 33 border: 1px solid blue; 34 background: lightblue; 35 width: 28px; 36 height: 28px; 37 } 38 .b20 { 39 margin-bottom: 20px; 40 } 41 .t20 { 42 margin-top: 20px; 43 } 44 .l10 { 45 margin-left: 10px; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="flexContainer rowWrap"> 51 <div class="item b20"></div> 52 <div class="item b20"></div> 53 <div class="item b20"></div> 54 <div class="item"></div> 55 <div class="item l10 b20"></div> 56 <div class="item l10"></div> 57 </div> 58 <div class="flexContainer columnWrap"> 59 <div class="item"></div> 60 <div class="item l10"></div> 61 <div class="item l10"></div> 62 <div class="item l10"></div> 63 <div class="item l10"></div> 64 <div class="item l10 t20"></div> 65 </div> 66 </body> 67 </html>