CSS order

<pre> <br /><t1>CCS order 屬性介紹</t1><br /> display:flex 的 order 屬性，就可改成DOM元素的排序。<br /> <br />< main > < style ><br />< div1 > 區塊-1< /div> div1{order 1}<br />< div2 > 區塊-2< /div> div2{order 2}<br />< div3 > 區塊-3< /div> div3{order 3}<br />< /main > < /style ><br /><br />區塊 div1 div2 div3 排序。<br /><br />flex-grow：伸展比<br />flex-shrink：收縮比<br />flex-basis：絕對值<br /><br />flex-direction<br />flex-wrap<br /></pre><style>pre {font-size: 20px ;} t1{font-size: 30px;color : blue;font-weight : bold;} r {color : red} </style>

00

<style> .sel select{font-size:18px; margin:5px 0 0 5px } .sel { font-size:20px; margin:5px 0 0 5px } #div1 { width:300px; height:100px; background-color:coral; font-size: 20px ;margin: 4px; padding: 2px; border: 1px solid #cccc33; border-radius: 7pt; background: antiquewhite; order:1 } #div2 { width:400px; height:150px; background-color:#8888bb; font-size: 20px ;margin: 4px; padding: 2px; border: 1px solid #cccc33; border-radius: 7pt; background: pink; order:2 } #div3 { width:600px; height:200px; background-color:coral; font-size: 20px ;margin: 4px; padding: 2px; border: 1px solid #cccc33; border-radius: 7pt; background: wheat; order:3} #main{ display:flex; flex-flow:row ; //column ; align-items:flex-end ; width:100%; height:300px; border:1px solid black; } #main div{flex: 1;} </style> <div class="sel"> CSS div { order : <select onchange="Order(this)"> <option value="1 2 3" > ▃ ▅ ▇ </option> <option value="2 1 3" > ▅ ▃ ▇</option> <option value="3 1 2" > ▇ ▃ ▅ </option> <option value="1 3 2" > ▃ ▇ ▅ </option> <option value="3 2 1" > ▇ ▅ ▃ </option></select> ; } <br> CSS div { flex : <select onchange="Order(this)"> <option value="a" > auto </option> <option value="n" > none</option> <option value="i" > initial </option> <option value="1" > 1 </option> <option value="3" > 0 30% </option> <option value="0" > 0 20%</option> </select> ; } <br> CSS main div { flex-flow : <select onchange="Order(this)"> <option value="main row" > flex-flow : row </option> <option value="main column" > flex-flow : column </option></select> ; } <br> </div><Br> <div id="main"> <div id="div1" ></div> <div id="div2" ></div> <div id="div3" ></div></div> <script>div1.style.order = 1; div2.style.order = 2; div3.style.order = 3; div1.style.flex = "auto"; div2.style.flex = "auto"; div3.style.flex = "auto"; main.style.flexFlow ="row" function Order(x) { if(x.value == "main row" ) { main.style.flexFlow = "row"; } if(x.value == "main column" ){ main.style.flexFlow = "column-reverse nowrap";} if(x.value == "0" ){ div1.style.flex = "0 20%"; div2.style.flex = "0 20%"; div3.style.flex = "0 20%"; } if(x.value == "3" ){ div1.style.flex = "0 30%"; div2.style.flex = "0 30%"; div3.style.flex = "0 30%"; } if(x.value == "a" ){ div1.style.flex = "auto"; div2.style.flex = "auto"; div3.style.flex = "auto"; } if(x.value == "i" ){ div1.style.flex = "initial"; div2.style.flex = "initial"; div3.style.flex = "initial"; } if(x.value == "n" ){ div1.style.flex = "none"; div2.style.flex = "none"; div3.style.flex = "none"; } if(x.value == "1" ){ div1.style.flex = "1 "; div2.style.flex = "1 "; div3.style.flex = "1 "; } if(x.value == "1 2 3" ){ div1.style.order = 1; div2.style.order = 2; div3.style.order = 3; } if(x.value == "2 1 3"){ div2.style.order = 1; div1.style.order = 2; div3.style.order = 3; } if(x.value == "3 1 2" ){ div3.style.order = 1; div1.style.order = 2; div2.style.order = 3; } if(x.value == "1 3 2" ){ div1.style.order = 1; div3.style.order = 2; div2.style.order = 3; } if(x.value == "3 2 1" ){ div3.style.order = 1; div2.style.order = 2; div1.style.order = 3; } div1.innerHTML = "div1<br>order= " + div1.style.order + "<br>flex = " + div1.style.flex; div2.innerHTML = "div2<br>order= " + div2.style.order + "<br>flex = " + div2.style.flex; div3.innerHTML = "div3<br>order= " + div3.style.order + "<br>flex = " + div3.style.flex; //alert(x.value) } Order("1 2 3"); </script>

00

Edit

#html #style #script #javascript #CSS #Order #CSS Order #display:flex order #元素的順序