今天在做项目时,要一个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——弹性布局的更多相关文章

  1. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  2. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  3. flex弹性布局心得

    概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...

  4. flex弹性布局属性详解!

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  5. java基础之Flex弹性布局、JSP错误处理以及Log4J

    一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...

  6. flex弹性布局,好用

    一直不太喜欢自己布局前端页面,都是扒别人的页面 ,最近在练习小程序,页面无处可扒,只有自己布局 发现flex弹性布局真好用,布局起来很简单,实现的效果也很好,赞 以后可以自己写一点前端了,哈哈

  7. flex弹性布局的基本介绍

    最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...

  8. css进阶之二:flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  9. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  10. flex弹性布局

    Flex 布局教程:语法篇  原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者:  ...

随机推荐

  1. Mvc动态注册HttpModule详解

    序言 注册Httpmodule可以让我们使用HttpApplication对象中的处理管道事件.目前大家所熟知的应该有2种方式来使用HttpApplication对象中的处理管道事件.第一种是通过Gl ...

  2. 每天一个Linux命令(17)--whereis命令

    whereis 命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返所有信息. 和find相比,whereis查找的速度非 ...

  3. mysql uodate select子查询

    UPDATE user SET pwd='123' WHERE id in (    SELECT id from user WHERE username = 'zx' ); 报错[Err] 1093 ...

  4. echarts动态添加数据(饼图为例)

    $.ajax({type : "POST",async : false,url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',da ...

  5. 《你不知道的JavaScript》整理(五)——值与原生函数

    一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 a.toExponential(); // &quo ...

  6. HTML5之通信和多线程

    HTML通信 跨文档消息传输 HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信.涉及 ...

  7. AlloyFinger.js 源码 学习笔记及原理说明

    此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate  touchStart  multipointStart   ...

  8. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  9. Bug跟踪的流程

    本文以翼发云协同项目管理系统为例子来讲解Bug跟踪的流程,它以工作流为中心的集成式Bug跟踪软件,它广泛地应用于研发行业的产品缺陷管理 与跟踪.事务跟踪.问题跟踪.任务跟踪.查询跟踪.需求管理.变更跟 ...

  10. 关于<context:property-placeholder>的一个有趣现象

    转:http://stamen.iteye.com/blog/1926166 先来看下A和B两个模块 A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块 ...