flexbox-flex-wrap-wrap.htm (1541B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: Flex-wrap = wrap</title> 5 <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> 6 <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> 8 <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> 9 <meta name="assert" content="Test checks that flex elements wrap left-to-right within their flex container when flex-wrap = 'wrap', matching the writing direction. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> 10 <style> 11 12 /* Test specific Styles */ 13 14 .flex-wrapper { 15 display: flex; 16 flex-wrap: wrap; 17 } 18 19 /* Test-series styles */ 20 21 .flex-wrapper { 22 width: 120px; 23 height: 120px; 24 25 /* should only display on error */ 26 background: red; 27 28 /* Enforce writing mode */ 29 direction: ltr; 30 writing-mode: horizontal-tb; 31 } 32 33 .flex-wrapper div { 34 width: 38px; 35 height: 38px; 36 37 background: green; 38 border: 1px solid limegreen; 39 40 color: white; 41 line-height: 40px; 42 text-align: center; 43 vertical-align: middle; 44 } 45 </style> 46 </head> 47 <body> 48 <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> 49 <div class="flex-wrapper"> 50 <div>1</div><div>2</div><div>3</div> 51 <div>4</div><div>5</div><div>6</div> 52 <div>7</div><div>8</div><div>9</div> 53 </div> 54 </body> 55 </html>