Javascript-flex layout test Case "Flex" spindle direction

<div class= "Container" >

<p>flex-direction</p>

<div id= "Radios" >

<input type= "Radio" name= "Same" value= "Row" Checked>row

<input type= "Radio" name= "Same" value= "Row-reverse" >row-reverse

<input type= "Radio" name= "Same" value= "column" >column

<input type= "Radio" name= "Same" value= "Column-reverse" >column-reverse

</div>

<div>

<button id= "Addbtn" >add</button>

<button id= "Removebtn" >remove</button>

</div>

<div id= "box" class= "box" >

<span class= "Item" ><p>1</p></span>

<span class= "Item" ><p>2</p></span>

<span class= "Item" ><p>3</p></span>

<span class= "Item" ><p>4</p></span>

<span class= "Item" ><p>5</p></span>

</div>

</div>

<style>

body{

Color: #dddddd;

Background:black;

}

. container{

margin:0 Auto;

width:900px;

Text-align:center;

}

. box{

Background:silver;

padding:30px;

Display:flex;

}

. item{

width:80px;

height:80px;

}

p{

Text-align:center;

Font-size:1.5em;

}

</style>

<script>

{

Let Getrandomcolor = () = ' # ' + math.random (). toString (2, 8);

[... Box.children].foreach (item) + = {

Item.style.background = Getrandomcolor ();

});

Let count = 5;

Addbtn.onclick = () + = {

Let div = document.createelement (' div ');

div.innerhtml = ' <span class= ' item "style=" Background:${getrandomcolor ()}; " ><p>${++count}</p></span> ';

Box.appendchild (Div.firstelementchild);

};

Removebtn.onclick = () + = {

Box.lastelementchild && (Box.removechild (box.lastelementchild), count--);

};

[... radios.children].foreach (radio) = {

Radio.onchange = () + = {

Box.style.flexDirection = Radios.queryselector (' input:checked '). Value;

};

});

};

</script>

Welcome to join the Web front-end communication Learning Group 018, find a group of private chat, send a huge amount of study materials free delivery

Javascript-flex layout test Case "Flex" spindle direction