Flex——弹性布局
今天在做项目时,要一个500*100的页面区域做三个橱窗,尼玛可是恶心死我了!光是计算左右内外边距,左右宽度,就废了一上午时间~~好吧,我承认我的数学老师挂得早!
正在苦逼的列公式,定位图片,浮动文字时,忽然一妹子飘然而至,看到我满纸的加减乘除,立刻投来鄙视的目光,悻悻然道:为何不用弹性布局??!
此刻,一万匹草泥马在心中奔腾,当即拿脑袋砸烂了键盘!尼玛!洒家咋把这东西给忘了呢???!!
于是重新复习了弹性布局,并在此做个总结笔记,以鉴世人!
首先,啥是弹性布局?我理解的是,就是可让网页中的任意元素,附有弹性,能长能缩,以适应页面排版,更能使网页兼容不同分辨率的屏幕。
看例子:
这是两个div,默认是不能显示在一行的,但现在我想让div2移动到右端,怎么做?
最简单的办法是加浮动,d1左浮,d2右浮:
或者,在d1,d2共同的父元素上,加一个display:inline-block;再调整div2靠右浮动,但这都会带来问题,因为只要是浮动,往往会影响页面中的其他元素,比如:浮动元素会影响其父元素高度,以及上外边距溢出溢出的问题,有兴趣的可以看我下一篇关于网页元素浮动的文章,在这里就不解释啦。
不过这些都是还不能算是真正的问题,毕竟都是可以解决的,但这带来的真正问题是复杂的麻烦,问题有时候会很容易解决,但是麻烦解决起来,常常会带来更大的麻烦。
比如,我现在再加一个元素:
我现在想让d1、d2、d3等间隔显示排列在背景条中,怎么办?拿尺子去量?去算?
好吧,这还是三个,可要是30个呢,300个呢,还这么干?
程序员就是怎么猝死的!!
而有了弹性布局,秒秒钟搞定!
看到没?就两行代码!
display:flex;是将3个div的父元素设置为弹性容器,
justify-content:space-between,就是让子元素div两端对齐,每两个项目之间的间隔相等。
现在呢,我不想等距划分了,因为div2比较帅,所以想让它多占一点空间,成为这个样子:
咋办?要用,总宽 - d1(宽) - d3(宽) = d2(宽)?!
呵呵,遇见淘宝那样的页面,你就等着猝死吧!
在这里,还是要用到弹性布局!
只需要在d2里加上一个flex的属性罢了!
看代码:
还是刚才的东西,其他都没动,更没算,只添加了一个flex-grow:1;的样式,搞定!
当然,flex还有其他十几个属性,不过都不常用,用法也都类似,在这里就不一一列举了,感兴趣的可以去查手册,反正我是懒~~
Flex——弹性布局的更多相关文章
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- flex弹性布局心得
概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...
- flex弹性布局属性详解!
详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...
- java基础之Flex弹性布局、JSP错误处理以及Log4J
一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...
- flex弹性布局,好用
一直不太喜欢自己布局前端页面,都是扒别人的页面 ,最近在练习小程序,页面无处可扒,只有自己布局 发现flex弹性布局真好用,布局起来很简单,实现的效果也很好,赞 以后可以自己写一点前端了,哈哈
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- flex弹性布局
Flex 布局教程:语法篇 原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者: ...
随机推荐
- Mvc动态注册HttpModule详解
序言 注册Httpmodule可以让我们使用HttpApplication对象中的处理管道事件.目前大家所熟知的应该有2种方式来使用HttpApplication对象中的处理管道事件.第一种是通过Gl ...
- 每天一个Linux命令(17)--whereis命令
whereis 命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返所有信息. 和find相比,whereis查找的速度非 ...
- mysql uodate select子查询
UPDATE user SET pwd='123' WHERE id in ( SELECT id from user WHERE username = 'zx' ); 报错[Err] 1093 ...
- echarts动态添加数据(饼图为例)
$.ajax({type : "POST",async : false,url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',da ...
- 《你不知道的JavaScript》整理(五)——值与原生函数
一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 a.toExponential(); // &quo ...
- HTML5之通信和多线程
HTML通信 跨文档消息传输 HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信.涉及 ...
- AlloyFinger.js 源码 学习笔记及原理说明
此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate touchStart multipointStart ...
- ajax上传图片
选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...
- Bug跟踪的流程
本文以翼发云协同项目管理系统为例子来讲解Bug跟踪的流程,它以工作流为中心的集成式Bug跟踪软件,它广泛地应用于研发行业的产品缺陷管理 与跟踪.事务跟踪.问题跟踪.任务跟踪.查询跟踪.需求管理.变更跟 ...
- 关于<context:property-placeholder>的一个有趣现象
转:http://stamen.iteye.com/blog/1926166 先来看下A和B两个模块 A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块 ...