flex-direction-row-reverse-ref.html (738B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title> 5 <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> 6 <style type="text/css"> 7 .container { 8 position: relative; 9 background: red; 10 margin: 1em 0; 11 border: 1px solid black; 12 text-align: right; 13 } 14 span { 15 display: inline-block; 16 background: green; 17 color: white; 18 margin: 1em; 19 width: 8em; 20 text-align: left; 21 } 22 </style> 23 </head> 24 <body> 25 <p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p> 26 <div class="container"> 27 <span>forth</span><span>third</span><span>second</span><span>first</span> 28 </div> 29 </body> 30 </html>