flex-direction-modify.html (2011B)
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-modify.html"> 8 <meta name="assert" content="Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look." /> 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:<span id="current_direction">row</h1> 43 <div id="flex_container" class="flex-container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> 44 45 <script> 46 var container = document.getElementById("flex_container"); 47 var direction_text = document.getElementById("current_direction"); 48 var baseClass = "flex-container "; 49 var classPrefix = "flex-direction-"; 50 function change_direction( direction ){ 51 container.className = baseClass + classPrefix + direction; 52 notify( direction ); 53 } 54 55 function notify( direction ){ 56 direction_text.innerHTML = direction; 57 } 58 59 change_direction("row"); 60 change_direction("row-reverse"); 61 change_direction("column"); 62 change_direction("row-column-reverse"); 63 change_direction("row"); 64 </script> 65 </body> 66 </html>