浅谈display:flex

 

display:flex 意思是弹性布局

首先flex的出现是为了解决哪些问题呢？

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚吃的html部分不变，css部分

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

1:2分时

同样分为3份时

flex是所占的比例，这样的布局就方便很多。

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

原文地址：http://www.cnblogs.com/manman04/p/5704660.html

弹性布局-flex的更多相关文章

  1. 弹性布局flex

    前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...

  2. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  3. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

  4. 弹性布局Flex的基本语法

    一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...

  5. 弹性布局--flex方向

    flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...

  6. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  7. 简单探讨弹性布局flex

    css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...

  8. 弹性布局flex 介绍

    摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  9. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

随机推荐

  1. 解决fonts.gstatic.com无法访问

    最近很多google的服务又在大陆地区受限了,原因不做过多讨论.屏蔽这些服务不仅仅意味着gmail,谷歌学术等方便的工具使用受到限制,更意味着很多寄托于google的web服务无法使用.wordpre ...

  2. android genymation eclipse安装

    http://www.cnblogs.com/1114250779boke/p/3657996.html

  3. iOS runtime 运行时( 二 )

    我们在编程过程中,如果使用到了runtime(运行时),我们几乎都是想动态的改变这个类的信息,包括方法,属性,balabala的,并且获得这个类的一些信息,等等,下面我们就来看看怎么通过runtime ...

  4. JavaSE——面向对象与面向过程、类与对象、(属性、方法、构造器)等

    一:面向对象与面向过程 二者都是一种思想,面向对象是相对于面向过程而言的. 面向过程: 1.面向过程思想强调的是过程(动作). 2.在面向过程的开发中,其实就是面向着具体的每一个步骤和过程,把每一个步 ...

  5. D. Ilya and Escalator

    D. Ilya and Escalator time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  6. 查找字符对应Unicode码的十进制数字

    //将字符转换为Unicode码中字符对应十进制数字 int byte0 = 'A' & 0xff;//byte0=65 参考文档:http://baike.baidu.com/view/26 ...

  7. PHP实现遍历、复制、删除目录

    一.遍历 opendir 具体函数我就不解释了,直接看代码理解: <?php header("Content-Type:Text/html;charset=utf8"); $ ...

  8. 新手不了解Xcode和mac系统可能犯得错误和我的建议

    我是学iOS刚入门的新手,本人装的时黑苹果,我是喜欢完美的人,但黑苹果又是不完美的系统,比如关不了机啊,和显卡驱动不了啊,当自己的电脑出现白屏和卡顿的时候气的没脾气.我是一个新手.开始学的时java但 ...

  9. Android 使用 HTTP 协议访问网络

    正在看<第一行代码>,记录一下使用 HTTP 协议访问网络的内容吧! 在Android发送Http请求有两种方式,HttpURLConnection和HttpClient. 1.使用Htt ...

  10. 在CentOS下安装配置MySQL

    经常需要在linux环境下部署项目或安装Mysql数据库,由于记性不好,每次都是求助度娘,每次搜到的步骤都不一样,所以每次都在尝试.冒险:于是乎,把安装的重要步骤贴出,供自己以后参照. 1.首先要看看 ...