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提出了 ...
随机推荐
- px转vw和vh的工具（对前端同学有用）
CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面. 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPhone6的屏幕设计的. 前端开发工程师将这 ...
- php中数组相关
<?php//参数默认值function abc($a,$b,$c = 0){ echo $a,$b,$c;}abc(1,3);结果为:130:echo "<br>&quo ...
- web自动化测试从入门到持续集成（selenium webdriver）
在很多刚学习自动化的可能会认为我只需要会运用selenium,我只需要在一个编辑器中实用selenium +java编写了一些脚本那么就会自动化了,是真的吗?答案肯定是假的.自动化肯定是需要做到真的完 ...
- Apache配置腾讯云SSL证书指引
一．安装Apache 1) 使用yum安装Apache # yum install httpd 2) 修改测试页面 # vim /var/www/html/index.heml PS:修改为测试内容, ...
- .net Mvc框架原理
.net Mvc框架原理 本文只是简要说明原理,学习后的总结. 1.当一个Http请求发送后会被URLRoutingModule拦截(这时候也就是正式进入管道,下章会讲管道事件) 2.这时根据Isap ...
- JavaScript正则表达式实例汇总
本文会持续更新 -------------------------------------------------------------------------------------------- ...
- 关闭 Activity 关闭方式 finish(), exit(), killProcess(), restartPackage()(转载)
finish():结束当前 Activity,不会立即释放内存.遵循 android 内存管理机制.exit():结束当前组件如 Activity,并立即释放当前 Activity 所占资源.kill ...
- 记录一个Unity播放器插件的开发
背景 公司最近在做VR直播平台,VR开发我们用到了Unity,而在Unity中播放视频就需要一款视频插件,我们调研了几个视频插件,记录两个,如下: Unity视频插件调研 网上搜了搜,最流行的有以下两 ...
- 242. Valid Anagram(leetcode)
Given two strings s and t, write a function to determine if t is an anagram of s. For example, s = & ...
- JAVA基础知识总结：十
一.抽象类 1.定义 当多个类中出现相同功能,但是功能主体是不同的,这是可以进行向上抽取的,只抽取功能的定义部分,使用抽象类实现 抽象类的存在就是为了被继承 2.使用 abstract 3.抽象类的特 ...