flexbox-multi-row-2-ref.html (3286B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <meta charset="utf-8"> 6 <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> 7 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 8 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 9 10 <style> 11 .multicol { 12 block-size: 70px; 13 inline-size: 200px; 14 column-width: 60px; 15 column-fill: auto; 16 column-gap: 10px; 17 border: 5px solid orange; 18 margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ 19 } 20 .flexContainer { 21 background: gray; 22 /* border-width is 0 by default; some sub-testcases will increase it. */ 23 border: 0 solid lightgray; 24 block-size: 140px; 25 } 26 .border-padding { 27 border-block-width: 10px; 28 padding-block: 5px; 29 } 30 .line { 31 inline-size: 60px; 32 block-size: 70px; 33 } 34 .with-gap .line { 35 block-size: 60px; 36 } 37 38 header, nav, article, footer { 39 inline-size: 30px; 40 } 41 .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { 42 inline-size: 25px; 43 } 44 45 /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ 46 header { 47 background: cyan; 48 block-size: 50px; 49 float: left; 50 } 51 nav { 52 background: magenta; 53 block-size: 25px; 54 float: right; 55 } 56 article { 57 background: yellow; 58 block-size: 40px; 59 float: left; 60 margin-block-start: 15px; 61 } 62 footer { 63 background: black; 64 block-size: 50px; 65 float: right; 66 margin-block-start: 20px; 67 } 68 .with-gap article, .with-gap footer { 69 margin-block-start: 10px; 70 } 71 </style> 72 73 <body> 74 <!-- Basic one without any margin/border/padding. --> 75 <div class="multicol"> 76 <div class="flexContainer"> 77 <div class="line"><header></header><nav></nav></div> 78 <div class="line"><article></article><footer></footer></div> 79 </div> 80 </div> 81 82 <!-- Test a container with margin-block-start. --> 83 <div class="multicol"> 84 <div class="flexContainer" style="margin-block-start: 25px"> 85 <div class="line"><header></header><nav></nav></div> 86 <div class="line"><article></article><footer></footer></div> 87 </div> 88 </div> 89 90 <!-- Test a container not at the top of the column/page. --> 91 <div class="multicol"> 92 <div style="block-size: 25px"></div> 93 <div class="flexContainer"> 94 <div class="line"><header></header><nav></nav></div> 95 <div class="line"><article></article><footer></footer></div> 96 </div> 97 </div> 98 99 <!-- Test a container with border and padding. --> 100 <div class="multicol"> 101 <div class="flexContainer border-padding"> 102 <div class="line"><header></header><nav></nav></div> 103 <div class="line"><article></article><footer></footer></div> 104 </div> 105 </div> 106 107 <!-- Test a container with border, padding, and gap. --> 108 <div class="multicol"> 109 <div class="flexContainer border-padding with-gap"> 110 <div class="line"><header></header><nav></nav></div> 111 <div style="block-size: 20px"><!-- row-gap --></div> 112 <div class="line"><article></article><footer></footer></div> 113 </div> 114 </div> 115 </body> 116 </html>