flex-direction-with-element-insert.html (2495B)
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-with-element-insert.html"> 8 <meta name="assert" content="The flex items inserted by script shuould follow the right direction what the flex-direction property directives." /> 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 id="flex-direction-row" 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 id="flex-direction-row-reverse" 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 id="flex-direction-column" 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 id="flex-direction-column-reverse" 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 54 55 <script> 56 var ids = ['flex-direction-row', 57 'flex-direction-row-reverse', 58 'flex-direction-column', 59 'flex-direction-column-reverse']; 60 61 for( var i in ids ){ 62 var new_element = document.createElement("div") 63 new_element.className="flex-item"; 64 new_element.innerHTML="new"; 65 var container = document.getElementById( ids[i] ); 66 container.appendChild( new_element ); 67 } 68 </script> 69 </body> 70 </html>