Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .father {

            width: 600px;

            height: 300px;

            background-color: #b6ff00;

            display: flex;

            /*flex-flow:column;*/

            flex-flow: row;

        }

            .father .son1 {

                flex: 1;

                border: 1px solid #000000;

            }

            .father .son2 {

                width: 500px;

                border: 1px solid #000000;

            }

            .father .son3 {

                flex: 1;

                border: 1px solid #000000;

            }

    </style>

</head>

<body>

    <div class="father">

        <div class="son1">第一</div>

        <div class="son2">第二</div>

        <div class="son3">第三</div>

    </div>

</body>

</html>

父标签设置了dispaly：flex后默认伸缩方向是从坐至右的。当子标签设置flex:1会让所以子元素在伸缩方向上均匀分布。

参考：dispaly、浅谈CSS3中display属性的Flex布局

CSS——display:flex的更多相关文章

  1. css display:flex 属性

    一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...

  2. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  3. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...

  4. HTML/CSS：display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  5. display:flex css

    本文介绍下flex的用法和属性 这个一个自适应的3列盒子 <div class="flex"> <div style="background-color ...

  6. 整理CSS中display flex（布局利器）

    关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...

  7. css兼容display:flex

    上代码: 这个是针对父元素: .container{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ displa ...

  8. 浅谈display:flex

    display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 ...

  9. 多栏多列布局（display:flex）

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

随机推荐

  1. [51Nod1089] 最长回文子串 V2（Manacher算法）

    1089 最长回文子串 V2(Manacher算法) 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   回文串是指aba.abba.cccbccc.aaaa这种左右对称 ...

  2. Ubuntu 16.04安装Insight实现汇编的调试

    由于Ubuntu从9.04开始就把Insight从APT源中删除,所以使用APT无法安装,而且<Assembly Language Step By Step, for Linux!>此书讲 ...

  3. Memcached的Web管理工具MemAdmin（待实践）

    Memcached的Web管理工具有很多,但是最好用的应该是MemAdmin.基于PHP5开发,所以部署时要注意环境. 介绍:http://www.junopen.com/memadmin/ 下载:h ...

  4. java中POJO类和DTO类都要实现序列化

    java中POJO类和DTO类都要实现序列化 java中POJO类和DTO类都要实现序列化 java中POJO类和DTO类都要实现序列化 序列化:序列化是将对象转换为容易传输的格式的过程.例如,可以序 ...

  5. hdu 4587 推断孤立点+割点+ 删除点之后，剩下多少连通分量

    做了非常久...... 题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=4587 先枚举删除的第一个点,第二个点就是找割点.没有割点当然也有答案 学到 ...

  6. jedis 2.7.2 jar

    jedis 2.7.2 已经公布. 源码https://github.com/xetorthio/jedis/releases/tag/jedis-2.7.2 jar 下载地址  http://dow ...

  7. 让ListView回来原来的位置

    让ListView回到原来的位置 当从ListView中的某一个Item跳转到其他的Activity,进行操作之后,ListView可能需要刷新(重新加载数据源),这个时候ListView就会回到原始 ...

  8. ubuntu安装ruby，安装sass，安装compass

    安装ruby apt-get install ruby. 默认会安装1.9的. 不是自己想要的. 可以进行下面的处理. # sudo apt-get install python-software-p ...

  9. 排列（permutation） 用1，2，3，…，9组成3个三位数abc，def和ghi，每个数字恰好使用一次，要 求abc：def：ghi＝1：2：3。按照“abc def ghi”的格式输出所有解，每行一个解。

    #include <stdio.h> #include <math.h> // 算法竞赛的目标是编程对任意输入均得到正确的结果. // 请先独立完成,如果有困难可以翻阅本书代码 ...

  10. P3959 宝藏 状压dp

    之前写了一份此题关于模拟退火的方法,现在来补充一下状压dp的方法. 其实直接在dfs中状压比较好想,而且实现也很简单,但是网上有人说这种方法是错的...并不知道哪错了,但是就不写了,找了一个正解. 正 ...