flex-direction-modify.html (1044B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: flex flow direction</title> 5 <link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> 6 <style> 7 .flex-container{ 8 display: flex; 9 margin:20px; 10 background: #333; 11 } 12 .flex-item{ 13 display: inline-block; 14 width:50px; 15 height:50px; 16 margin:20px; 17 background: #eee; 18 line-height: 50px; 19 text-align: center; 20 } 21 22 23 .flex-container.flex-direction-row{ 24 flex-direction : row; 25 } 26 27 .flex-container.flex-direction-row-reverse{ 28 flex-direction : row-reverse; 29 } 30 31 .flex-container.flex-direction-column{ 32 flex-direction : column; 33 } 34 .flex-container.flex-direction-column-reverse{ 35 flex-direction : column-reverse; 36 } 37 </style> 38 </head> 39 <body> 40 <h1>flex-direction:row</h1> 41 <div id="flex_container" class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> 42 43 </body> 44 </html>