flexbox-flex-direction-ref.htm (1150B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Reftest Reference: Flexbox direction and wrapping</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 <style> 8 9 /* Ref test styles */ 10 11 .flex-wrapper div{ 12 display: inline-block; 13 } 14 15 16 /* Test-series styles */ 17 18 .flex-wrapper { 19 width: 120px; 20 height: 120px; 21 22 /* should only display on error */ 23 background: red; 24 25 /* Enforce writing mode */ 26 direction: ltr; 27 writing-mode: horizontal-tb; 28 } 29 30 .flex-wrapper div { 31 width: 38px; 32 height: 38px; 33 34 background: green; 35 border: 1px solid limegreen; 36 37 color: white; 38 line-height: 40px; 39 text-align: center; 40 vertical-align: middle; 41 } 42 </style> 43 </head> 44 <body> 45 <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> 46 <div class="flex-wrapper"> 47 <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 48 </div> 49 </body> 50 </html>