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. tomcat这种http服务器，是能接收到客户端的断开信息的，并能打印出来

    如,tomcat的运行文件 DEBUG -- CLOSE BY CLIENT STACK TRACE

  2. ftk学习记（输入框篇）

    [ 声明:版权全部.欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 昨天讲了进度条,我们还是看看它的运行效果是怎么样的.截图例如以下, 进度条使用的情况还是比較多的 ...

  3. Analyze提示:Value stored to &quot;***&quot;is never read

    text这个变量没有被使用,在当前类中搜索'text'这个变量发现仅仅是被赋值并没有被使用. 提示意思是:删除或者凝视这行代码;

  4. s:actionmessage页面样式失效

    1,  s:actionmessage页面样式失效: 2,解决方式: 将样式直接写入s:actionmessage标签中:<span><s:actionmessage cssSt ...

  5. HDU1171_Big Event in HDU【01背包】

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  6. X86架构下Linux启动过程分析

    1.X86架构下的从开机到Start_kernel启动的整体过程 这个过程简要概述为: 开机-->BIOS-->GRUB/LILO-->Linux Kernel 其执行的流程图和重要 ...

  7. XAML实例教程系列 - XAML传递参数到值转换类实例 八

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - XAML传递参数到值转换类实例 2012-06-28 05:25 by jv9, 508 阅读, 0 评论, 收藏, 编辑 继上 ...

  8. HDU3487 Play with Chain splay 区间反转

    HDU3487 splay最核心的功能是将平衡树中的节点旋转到他的某个祖先的位置,并且维持平衡树的性质不变. 两个操作(数组实现) cut l,r, c把[l,r]剪下来放到剩下序列中第c个后面的位置 ...

  9. 杂项：BPM

    ylbtech-杂项:BPM 1.返回顶部 1. BPM,即业务流程管理,是一种以规范化的构造端到端的卓越业务流程为中心,以持续的提高组织业务绩效为目的的系统化方法,常见商业管理教育如EMBA.MBA ...

  10. 特征变化--->标签到索引的转换（StringIndexer）

    package Spark_MLlib import org.apache.spark.ml.feature.StringIndexer import org.apache.spark.sql.Spa ...