flex-direction.html (1833B)
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 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> 7 <link rel="match" href="reference/flex-direction.html"> 8 <meta name="assert" content="The flow of flex items in the flex container should observe the flex-direction property." /> 9 <style> 10 .flex-container{ 11 display: flex; 12 margin:20px; 13 background: #333; 14 } 15 .flex-item{ 16 width:50px; 17 height:50px; 18 margin:20px; 19 background: #eee; 20 line-height: 50px; 21 text-align: center; 22 } 23 24 25 .flex-container.flex-direction-row{ 26 flex-direction : row; 27 } 28 29 .flex-container.flex-direction-row-reverse{ 30 flex-direction : row-reverse; 31 } 32 33 .flex-container.flex-direction-column{ 34 flex-direction : column; 35 } 36 .flex-container.flex-direction-column-reverse{ 37 flex-direction : column-reverse; 38 } 39 </style> 40 </head> 41 <body> 42 <h1>flex-direction:row</h1> 43 <div 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> 44 45 <h1>flex-direction:row-reverse</h1> 46 <div class="flex-container flex-direction-row-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> 47 48 <h1>flex-direction:column</h1> 49 <div class="flex-container flex-direction-column"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> 50 51 <h1>flex-direction:column-reverse</h1> 52 <div class="flex-container flex-direction-column-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> 53 </body> 54 </html>