flexbox-flex-flow-001-ref.html (4203B)
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: 13px; 30 } 31 .singleLineVert > * { 32 height: 13px; 33 float: none; 34 } 35 </style> 36 </head> 37 <body> 38 <!-- single-line (flex-wrap unspecified): --> 39 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> 40 <div>1</div><div>2</div><div>3</div><div>4</div> 41 </div> 42 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> 43 <div>4</div><div>3</div><div>2</div><div>1</div> 44 </div> 45 <div class="flexContainer singleLineVert"><!-- flex-flow: column --> 46 <div>1</div><div>2</div><div>3</div><div>4</div> 47 </div> 48 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> 49 <div>4</div><div>3</div><div>2</div><div>1</div> 50 </div> 51 52 <div style="clear:both"></div> 53 54 <!-- now using "wrap", after flex-direction: --> 55 <div class="flexContainer"><!-- flex-flow: row wrap --> 56 <div>1</div><div>2</div><div>3</div><div>4</div> 57 </div> 58 <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> 59 <div>2</div><div>1</div><div>4</div><div>3</div> 60 </div> 61 <div class="flexContainer"><!-- flex-flow: column wrap --> 62 <div>1</div><div>3</div><div>2</div><div>4</div> 63 </div> 64 <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> 65 <div>2</div><div>4</div><div>1</div><div>3</div> 66 </div> 67 68 <div style="clear:both"></div> 69 70 <!-- now using "wrap", before flex-direction: --> 71 <div class="flexContainer"><!-- flex-flow: wrap row --> 72 <div>1</div><div>2</div><div>3</div><div>4</div> 73 </div> 74 <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> 75 <div>2</div><div>1</div><div>4</div><div>3</div> 76 </div> 77 <div class="flexContainer"><!-- flex-flow: wrap column --> 78 <div>1</div><div>3</div><div>2</div><div>4</div> 79 </div> 80 <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> 81 <div>2</div><div>4</div><div>1</div><div>3</div> 82 </div> 83 84 <div style="clear:both"></div> 85 86 <!-- now using "wrap-reverse", after flex-direction: --> 87 <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> 88 <div>3</div><div>4</div><div>1</div><div>2</div> 89 </div> 90 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> 91 <div>4</div><div>3</div><div>2</div><div>1</div> 92 </div> 93 <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> 94 <div>3</div><div>1</div><div>4</div><div>2</div> 95 </div> 96 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> 97 <div>4</div><div>2</div><div>3</div><div>1</div> 98 </div> 99 100 <div style="clear:both"></div> 101 102 <!-- now using "wrap-reverse", before flex-direction: --> 103 <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> 104 <div>3</div><div>4</div><div>1</div><div>2</div> 105 </div> 106 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> 107 <div>4</div><div>3</div><div>2</div><div>1</div> 108 </div> 109 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> 110 <div>3</div><div>1</div><div>4</div><div>2</div> 111 </div> 112 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> 113 <div>4</div><div>2</div><div>3</div><div>1</div> 114 </div> 115 116 <div style="clear:both"></div> 117 118 <!-- now just specifying flex-wrap (no flex-direction) --> 119 <div class="flexContainer"><!-- flex-flow: wrap --> 120 <div>1</div><div>2</div><div>3</div><div>4</div> 121 </div> 122 <div class="flexContainer"><!-- flex-flow: wrap-reverse --> 123 <div>3</div><div>4</div><div>1</div><div>2</div> 124 </div> 125 126 </body> 127 </html>