首页 > 代码库 > JavaScript - flex布局测试案例【flex】主轴方向
JavaScript - flex布局测试案例【flex】主轴方向
<div class="container">
<p>flex-direction</p>
<div id="radios">
<input type="radio" name="same" value="http://www.mamicode.com/row" checked>row
<input type="radio" name="same" value="http://www.mamicode.com/row-reverse">row-reverse
<input type="radio" name="same" value="http://www.mamicode.com/column">column
<input type="radio" name="same" value="http://www.mamicode.com/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，找群主私聊，送海量学习资料免费送
JavaScript - flex布局测试案例【flex】主轴方向