flexbox-flex-flow-001.html (4497B)
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 Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> 11 <link rel="match" href="flexbox-flex-flow-001-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: flex; 16 height: 60px; 17 width: 60px; 18 font: 10px sans-serif; 19 background: yellow; 20 float: left; 21 border: 1px solid black; 22 } 23 .flexContainer > * { 24 border: 1px dotted gray; 25 width: 28px; 26 height: 28px; 27 /* Explicitly set min-width & min-height to 0, to prevent their "auto" 28 value from influencing the sizes of our flex items (particularly for 29 the single-line chunks of this testcase, whose items may be shrunk a 30 little below the numerals' intrinsic sizes): */ 31 min-width: 0; 32 min-height: 0; 33 } 34 </style> 35 </head> 36 <body> 37 <!-- single-line (flex-wrap unspecified): --> 38 <div class="flexContainer" style="flex-flow: row"> 39 <div>1</div><div>2</div><div>3</div><div>4</div> 40 </div> 41 <div class="flexContainer" style="flex-flow: row-reverse"> 42 <div>1</div><div>2</div><div>3</div><div>4</div> 43 </div> 44 <div class="flexContainer" style="flex-flow: column"> 45 <div>1</div><div>2</div><div>3</div><div>4</div> 46 </div> 47 <div class="flexContainer" style="flex-flow: column-reverse"> 48 <div>1</div><div>2</div><div>3</div><div>4</div> 49 </div> 50 51 <div style="clear:both"></div> 52 53 <!-- now using "wrap", after flex-direction: --> 54 <div class="flexContainer" style="flex-flow: row wrap"> 55 <div>1</div><div>2</div><div>3</div><div>4</div> 56 </div> 57 <div class="flexContainer" style="flex-flow: row-reverse wrap"> 58 <div>1</div><div>2</div><div>3</div><div>4</div> 59 </div> 60 <div class="flexContainer" style="flex-flow: column wrap"> 61 <div>1</div><div>2</div><div>3</div><div>4</div> 62 </div> 63 <div class="flexContainer" style="flex-flow: column-reverse wrap"> 64 <div>1</div><div>2</div><div>3</div><div>4</div> 65 </div> 66 67 <div style="clear:both"></div> 68 69 <!-- now using "wrap", before flex-direction: --> 70 <div class="flexContainer" style="flex-flow: wrap row"> 71 <div>1</div><div>2</div><div>3</div><div>4</div> 72 </div> 73 <div class="flexContainer" style="flex-flow: wrap row-reverse"> 74 <div>1</div><div>2</div><div>3</div><div>4</div> 75 </div> 76 <div class="flexContainer" style="flex-flow: wrap column"> 77 <div>1</div><div>2</div><div>3</div><div>4</div> 78 </div> 79 <div class="flexContainer" style="flex-flow: wrap column-reverse"> 80 <div>1</div><div>2</div><div>3</div><div>4</div> 81 </div> 82 83 <div style="clear:both"></div> 84 85 <!-- now using "wrap-reverse", after flex-direction: --> 86 <div class="flexContainer" style="flex-flow: row wrap-reverse"> 87 <div>1</div><div>2</div><div>3</div><div>4</div> 88 </div> 89 <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> 90 <div>1</div><div>2</div><div>3</div><div>4</div> 91 </div> 92 <div class="flexContainer" style="flex-flow: column wrap-reverse"> 93 <div>1</div><div>2</div><div>3</div><div>4</div> 94 </div> 95 <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> 96 <div>1</div><div>2</div><div>3</div><div>4</div> 97 </div> 98 99 <div style="clear:both"></div> 100 101 <!-- now using "wrap-reverse", before flex-direction: --> 102 <div class="flexContainer" style="flex-flow: wrap-reverse row"> 103 <div>1</div><div>2</div><div>3</div><div>4</div> 104 </div> 105 <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> 106 <div>1</div><div>2</div><div>3</div><div>4</div> 107 </div> 108 <div class="flexContainer" style="flex-flow: wrap-reverse column"> 109 <div>1</div><div>2</div><div>3</div><div>4</div> 110 </div> 111 <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> 112 <div>1</div><div>2</div><div>3</div><div>4</div> 113 </div> 114 115 <div style="clear:both"></div> 116 117 <!-- now just specifying flex-wrap (no flex-direction) --> 118 <div class="flexContainer" style="flex-flow: wrap"> 119 <div>1</div><div>2</div><div>3</div><div>4</div> 120 </div> 121 <div class="flexContainer" style="flex-flow: wrap-reverse"> 122 <div>1</div><div>2</div><div>3</div><div>4</div> 123 </div> 124 125 </body> 126 </html>