flexbox-flex-flow-002-ref.html (4705B)
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 Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 .flexContainer { 13 height: 60px; 14 width: 60px; 15 font: 10px sans-serif; 16 background: yellow; 17 float: left; 18 border: 1px solid black; 19 } 20 .flexContainer > * { 21 border: 1px dotted gray; 22 width: 28px; 23 height: 28px; 24 float: left; 25 } 26 27 /* The single-line flex containers' flex items are shrunk in main axis: */ 28 .singleLineHoriz > * { 29 width: 18px; 30 } 31 .singleLineVert > * { 32 height: 18px; 33 float: none; 34 } 35 .hidden { 36 /* We use this to hide the "4" box in each of the multi-line chunks. 37 The testcase has 3 flex items in each flex container, but it's easier 38 to write this reference case w/ a hidden 4th box as a space-filler. */ 39 visibility: hidden; 40 } 41 </style> 42 </head> 43 <body> 44 <!-- single-line (flex-wrap unspecified): --> 45 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> 46 <div>1</div><div>2</div><div>3</div> 47 </div> 48 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> 49 <div>3</div><div>2</div><div>1</div> 50 </div> 51 <div class="flexContainer singleLineVert"><!-- flex-flow: column --> 52 <div>1</div><div>2</div><div>3</div> 53 </div> 54 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> 55 <div>3</div><div>2</div><div>1</div> 56 </div> 57 58 <div style="clear:both"></div> 59 60 <!-- now using "wrap", after flex-direction: --> 61 <div class="flexContainer"><!-- flex-flow: row wrap --> 62 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> 63 </div> 64 <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> 65 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> 66 </div> 67 <div class="flexContainer"><!-- flex-flow: column wrap --> 68 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> 69 </div> 70 <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> 71 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> 72 </div> 73 74 <div style="clear:both"></div> 75 76 <!-- now using "wrap", before flex-direction: --> 77 <div class="flexContainer"><!-- flex-flow: wrap row --> 78 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> 79 </div> 80 <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> 81 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> 82 </div> 83 <div class="flexContainer"><!-- flex-flow: wrap column --> 84 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> 85 </div> 86 <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> 87 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> 88 </div> 89 90 <div style="clear:both"></div> 91 92 <!-- now using "wrap-reverse", after flex-direction: --> 93 <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> 94 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> 95 </div> 96 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> 97 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> 98 </div> 99 <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> 100 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> 101 </div> 102 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> 103 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> 104 </div> 105 106 <div style="clear:both"></div> 107 108 <!-- now using "wrap-reverse", before flex-direction: --> 109 <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> 110 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> 111 </div> 112 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> 113 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> 114 </div> 115 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> 116 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> 117 </div> 118 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> 119 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> 120 </div> 121 122 <div style="clear:both"></div> 123 124 <!-- now just specifying flex-wrap (no flex-direction) --> 125 <div class="flexContainer"><!-- flex-flow: wrap --> 126 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> 127 </div> 128 <div class="flexContainer"><!-- flex-flow: wrap-reverse --> 129 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> 130 </div> 131 132 </body> 133 </html>