文档章节

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

小婧大神
 小婧大神
发布于 2017/04/07 14:00
字数 220
阅读 4
收藏 0

<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,找群主私聊,送海量学习资料免费送

本文转载自:

共有 人打赏支持
小婧大神
粉丝 0
博文 77
码字总数 3758
作品 0
私信 提问
前端入门5-CSS弹性布局flex

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/10/31
0
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
0
0
再次简单明了总结flex布局,一看就懂...

思维导图 flex 布局 类型 display: flex;(本文章为此为主) display;inline-flex; 属性 父节点 容器flex-container 子节点 flex-item 父节点容器 flex-direction 主轴方向(一般水平方向) fle...

sponing
02/26
0
0
5分钟吃透React Native Flexbox

今天我们来聊聊Flexbox,它是前端的一个布局方式。在React Native中是主流布局方式。如果你刚刚入门React Native,或者没有多少前端的技术经验,亦或者对其半知半解,那么这篇文章将很好的帮...

idisfkj
2018/08/28
0
0
前端布局神器display:flex

2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 flex浏览器支持 一、Flex布局是什么? Flex是Flexible Box的缩写,...

Lienson
03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 扩展lv

相关概念 逻辑卷可以实现硬盘空间的动态划分和管理。 1】 物理卷 LV 处于最低层,可以是物理硬盘上的分区,也可以是整个物理硬盘 2】 卷组 VG 卷组建立在物理卷之上,一个卷组至少要包括一个...

hnairdb
4分钟前
0
0
如何快速定位Ruby函数源码

如何快速定位Ruby函数源码 1、gem gem which sidekiq 2、bundle bundle show redis 3、CTags Sublime extend ActiveSupport::Concernrescue_fromcurrent_company.cc_ad_tasks.creat......

mingle
5分钟前
0
0
基于 DataLakeAnalytics 的数据湖实践

随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析...

阿里云云栖社区
7分钟前
0
0
word文档处理成富文本生成sql语句导入mysql

问题:需要将大量的已存在的word文档导入到web项目里在网站展示,不可能通过编辑录入的方式处理,通过程序实现。 解决思路:通过读取word文档处理成html,再获取html富文本内容,拼接成sql,...

S三少S
13分钟前
29
0
WAF开放规则定义权:专家策略+用户自定义策略=Web安全

在第一期“漫说安全”栏目中,我们用四格漫画的形式介绍了基于深度学习的阿里云WAF到底智能在哪里,能帮客户解决什么问题。 在今天的这期栏目里,我们依然通过漫画这种通俗易懂的方式,与大家...

迷你芊宝宝
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部