flexbox-single-row-3-ref.html (2666B)
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 single-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: 50px; 13 inline-size: 320px; 14 column-count: 3; 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 padding-block: 15px; 20 } 21 .flexContainer { 22 background: gray; 23 /* border-width is 0 by default; some sub-testcases will increase it. */ 24 border: 0 solid white; 25 block-size: 100px; 26 position: relative; 27 } 28 .gap { 29 inline-size: 4px; 30 block-size: 100%; 31 } 32 33 /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ 34 header, nav, article, footer { 35 inline-size: 25px; 36 } 37 header { 38 background: cyan; 39 block-size: 100px; 40 position: absolute; 41 inset-block-start: 0px; 42 } 43 nav { 44 background: magenta; 45 block-size: 25px; 46 position: absolute; 47 inset-block-start: 0px; 48 inset-inline-start: 25px; 49 } 50 article { 51 background: yellow; 52 block-size: 50px; 53 position: absolute; 54 inset-block-start: 25px; 55 inset-inline-start: 50px; 56 } 57 footer { 58 background: black; 59 block-size: 75px; 60 position: absolute; 61 inset-block-start: 25px; 62 inset-inline-start: 75px; 63 } 64 </style> 65 66 <body> 67 <!-- Test a container with margin-block-start. --> 68 <div class="multicol"> 69 <div class="flexContainer" style="margin-block-start: 25px"> 70 <header></header><nav></nav><article></article><footer></footer> 71 </div> 72 </div> 73 74 <!-- Test a container not at the top of the column/page. --> 75 <div class="multicol"> 76 <div style="block-size: 25px"></div> 77 <div class="flexContainer"> 78 <header></header><nav></nav><article></article><footer></footer> 79 </div> 80 </div> 81 82 <!-- Test a container with border, padding, and column-gap. --> 83 <div class="multicol"> 84 <div class="flexContainer border-padding"> 85 <header style="inline-size: 22px"></header> 86 <nav style="inline-size: 22px; inset-inline-start: 26px"></nav> 87 <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article> 88 <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer> 89 </div> 90 </div> 91 </body> 92 </html>