flex布局元素操作详情
之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局
父元素:
格式:flex-direction|| flex-wrap;
如: flex-flow: row wrap;
flex-start
flex-end
center
space-between
space-around
flex-start
flex-end
center
baseline
stretch
flex-start
flex-end
center
space-between
space-around
stretch
子元素:
添加一个order在-5~5间的元素
重置
使第一个元素的 flex-frow +1
重置
负值对该属性无效。)
改变第一个元素的 flex-shrink
改变第二个元素的flex-basis
可以为 none 也可以是由flex-grow flex-shrink flex-basis这三个属性组合而成的;
当flex:auto时值为1 1 auto;
当flex:none时值为0 0 auto;
属性同 align-items 分为:auto | flex-start | flex-end | center | baseline | stretch;
除了auto效果完全相同
// order:1
'
}
document.getElementById('addFlexGrow').onclick = function(){
var div = this.parentNode.getElementsByClassName('box')[0].childNodes[1];
var bar = Number(div.style.flexGrow);
bar += 1;
div.style.flexGrow = bar;
div.innerText = 'flex-grow:'+bar;
}
document.getElementById('resetFlexGrow').onclick = function(){
var div = this.parentNode.getElementsByClassName('box')[0].childNodes[1];
div.style.flexGrow = 1;
div.innerText = 'flex-grow:1';
}
document.getElementById('changeFlexShrink').onclick = function(){
var div = this.parentNode.getElementsByClassName('box')[0].childNodes[1];
var bar = div.style.flexShrink;
console.log(bar)
bar = (bar == 0) ? 1:0;
div.style.flexShrink = bar;
div.innerText = 'flex-shrink:'+bar
}
document.getElementById('changeFlexBasis').onclick = function(){
var div = this.parentNode.getElementsByClassName('box')[0].childNodes[3];
console.log(div)
var bar = div.style.flexBasis;
bar = (bar == 'auto') ? '500px' : 'auto';
div.style.flexBasis = bar;
div.innerText = 'flex-basis:'+bar;
}
// ]]>
flex布局元素操作详情的更多相关文章
- 轻松pick移动开发第一篇，flex布局
一.什么是flex布局 首先提问一个问题,一般童鞋都会让子元素水平居中,那么怎么让子元素垂直居中呢?这里就要用到我们的flex布局了. 1.flex 是 flexible Box 的缩写,意为&quo ...
- [续更]一起来撸一下Flex布局里面的那些属性
Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 使用flex布局解决百分比高度元素垂直居中
方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...
- flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）
1 .flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况 实现效果: 解决方案:使用after伪类, 解决最后一排数量不够两端分布的情况.宽度就是每张图片的宽度 .list:after { ...
- flex 布局 出滚动条的操作
flex布局也是可以初横向滚动条的哦, 设置 flex-wrap:nowrap ,然后横向的固定宽度超过100% 则出滚动条
- flex布局取消子元素（img、div等）缩放：
取消子元素(img.div等)缩放: 父元素: display: flex ; 子元素: flex-shrink: 0;
- flex布局控制最后一个元素右浮动
可以在最后一个元素添加css属性 margin-left: auto; 例如我一排排列的元素 ,子元素并没有完全排列撑开父元素的宽度,这时候要使最后一个元素想最右 可以让最后一个元素的 margin- ...
- Flex 布局相关用法
前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...
随机推荐
- Spring MVC 页面跳转时传递参数
页面仍然使用 JSP,在跳转时如果想传递参数则需要用到类 RedirectAttributes. 首先看看如何打开一个普通页面: // 登录页面(每个页面都要独立的 Action 来支持其呈现) @R ...
- 【学习】js学习笔记：数组（二）
二维数组 例子:矩形反转: <script> var arr=[[1,1,1,1,1],[2,2,2,2,2],[3,3,3,3,3],[4,4,4,4,4],[5,5,5,5,5]]; ...
- Pyhton编程（二）之变量、用户输入及条件语句
一:变量 变量定义的规则 1)只能由数字.字母.下划线组成(不能以数字开头) 2)不能使用关键字作为变量名 ['and', 'as', 'assert', 'break', 'class', 'con ...
- laravel框架包资源分享
最近发现laravel框架包很难下,楼楼之前下了两个版本,分享一下,希望对大家有所帮助.laravel-v5.2.15 链接: https://pan.baidu.com/s/1qYyhbFe 密码: ...
- [Web开发(1)] MyEclipse/Eclipse 使用Tomcat部署Web/Maven项目经典错误
1.Tomcat启动报错:server tomcat start within 45 seconds 问题原因:由于eclipse默认Tomcat设置是启动时间为45s,所以在45s内没有启动成功就会 ...
- SpringBoot的几个使用技巧
SpringBoot的几个使用技巧 首先提供几个SpringBoot开发过程中常用的网站: Spring Boot官方文档:http://docs.spring.io/spring-boot/docs ...
- LeetCode 122. Best Time to Buy and Sell Stock II （买卖股票的最好时机之二）
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- centos7 防火墙 配置
1.查看Firewall 服务状态 systemctl status firewalld 2.查看Firewall 的状态 firewall-cmd --state 注意: firewalld默认配置 ...
- MQTT——连接报文
学习MQTT协议.如果只是看了相关文档就认为可以了.那是一个错误的观念.笔者为了能更好的去理解MQTT协议.看了不少相关的开源Broker的项目.可惜这些项目一般都是不完全的.不过从这些项目中笔者至少 ...
- java自动化-juint框架简述
本人使用的是java的juint框架来组织的自动化测试,故我这边需要简单介绍一下juint框架 首先,建议自行百度一下juint框架,先有一个大概的了解 所谓的接口自动化测试,会对多个接口中每一个接口 ...