JavaScript - flex布局测试案例【flex】主轴方向

<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(16).slice(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>

 

欢迎加入web前端交流学习群018，找群主私聊，送海量学习资料免费送