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. 20180725利用pmm监控管理mysql

    转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...

  2. 51Nod——T 1631 小鲨鱼在51nod小学

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1631 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 ...

  3. Java获取系统环境变量（System Environment Variable）和系统属性（System Properties）以及启动参数的方法

    系统环境变量(System Environment Variable): 在Linux下使用export $ENV=123指定的值.获取的方式如下: Map<String,String> ...

  4. Java的23种设计模式（转）

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...

  5. 苹果iOS手机后门的”诊断功能论“不攻自破

    7月23日.苹果公司公布公告,题为"iOS:About diagnostic capabilities"("iOS:关于诊断功能").当中声称:iOS offe ...

  6. JavaScript解析顺序和变量作用域

    JavaScript基础之变量作用域. 一. 1.全局变量:全局变量的意思就是,在代码的不论什么地方都能够訪问到.注意:未定义 直接赋值的变量拥有全局属性. 2.局部变量:局部变量的意思就是,变量的作 ...

  7. Oracle 闪回区满解决的方法

    闪回区满: OS: rm -rf [archivelog  autobackup  backupset  controlfile  flashback  onlinelog] eg : archive ...

  8. 【UML 建模】在线UML建模工具 ProcessOn 使用具体解释

    总结 : -- 推荐理由 : 近期从 Windows 操作系统 转到 MAC 上, 正在看设计模式 和 重构, 找不到好用的 UML 工具, 因此在网上找了一款能够在线使用的 UML 工具, 用起来发 ...

  9. unity3D游戏开发实战原创视频讲座系列7之消消乐游戏开发

    解说文件夹 第一讲  游戏介绍和资源简单介绍 第二讲  游戏场景背景的搭建 第三讲  游戏特效预制体的制作 第四讲  游戏场景前景的显示 第五讲  瓷砖背景块 第六讲  方块的消除 第七讲  方块的交 ...

  10. centos上装eclipse步骤

    1.去官网下个eclipse for linux的  地址:http://www.eclipse.org/downloads/    Eclipse IDE for Java EE Developer ...