JavaScript - flex布局测试案例【flex】主轴方向
2017-04-07 00:00
525 查看
<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,找群主私聊,送海量学习资料免费送
<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,找群主私聊,送海量学习资料免费送
相关文章推荐
- js - flex布局测试案例:完美居中
- 弹性布局学习-详解 flex-direction【决定主轴的方向】(二)
- 从零开始学_JavaScript_系列(17)——CSS<4>(定位、遮罩、float、弹性布局flex)
- flexbox(二) 确定主轴(伸缩流)的方向&伸缩容器对伸缩项目换行&确定伸缩项目在伸缩容器中布局的顺序
- Flex布局做出自适应页面--语法和案例
- flex布局主轴元素单独设置对齐方式
- javaScript flex布局使用
- flex布局入门案例(学习笔记20171022001)
- flex 常见布局 案例
- 案例十 、JavaScript瀑布流布局
- Flex布局——色子的小案例
- flex布局 主轴宽度不足时,子项目宽度设置不起作用
- 我的JavaScript回顾之路_08—0227—支付密码输入框/弹性布局flex
- FlexBox布局初识 - 主轴和侧轴
- 25 JavaScript的幻灯片用于在Web布局的精彩案例
- 关于Flex 站点的SEO(测试现场直播2)热风传媒案例
- 从零开始 React Native(8) flex布局_常用控件案例
- 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案
- css布局:水平和垂直方向都居中,以及用flex实现
- 伸缩布局的主轴布局方向详解+注释