flexbox-flex-direction-column-reverse.htm (1657B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: Flex-direction = column-reverse</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-direction-property"> 8 <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> 9 <meta name="assert" content="Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, and main-start and main-end are swapped, when flex-direction = column-reverse. 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-direction: column-reverse; 17 flex-wrap: wrap; 18 } 19 20 /* Test-series styles */ 21 22 .flex-wrapper { 23 width: 120px; 24 height: 120px; 25 26 /* should only display on error */ 27 background: red; 28 29 /* Enforce writing mode */ 30 direction: ltr; 31 writing-mode: horizontal-tb; 32 } 33 34 .flex-wrapper div { 35 width: 38px; 36 height: 38px; 37 38 background: green; 39 border: 1px solid limegreen; 40 41 color: white; 42 line-height: 40px; 43 text-align: center; 44 vertical-align: middle; 45 } 46 </style> 47 </head> 48 <body> 49 <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> 50 <div class="flex-wrapper"> 51 <div>7</div><div>4</div><div>1</div> 52 <div>8</div><div>5</div><div>2</div> 53 <div>9</div><div>6</div><div>3</div> 54 </div> 55 </body> 56 </html>