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. Quartz原理解密

    Quartz原理解密 Author: Dorae Date:2018年7月17日15:55:02 转载请注明出处 一.quartz概述 quartz是一个用java实现的开源任务调度框架,可以用来创建 ...

  2. HDU RSA 扩展欧几里得

    Problem Description RSA is one of the most powerful methods to encrypt data. The RSA algorithm is de ...

  3. mybatis mapper文件sql语句传入hashmap参数

    1.怎样在mybatis mapper文件sql语句传入hashmap参数? 答:直接这样写map就可以 <select id="selectTeacher" paramet ...

  4. nodejs 运行

    运行 Node.js 程序的基本方法就是执行 node script.js,其中 script.js①是脚本的文件名. 除了直接运行脚本文件外,node --help 显示的使用方法中说明了另一种输出 ...

  5. Wireshark 抓包遇到 you don’t have permission to capture on that device mac 错误的解决方案

    Wireshark 抓包遇到 you don’t have permission to capture on that device mac 错误的解决方案 上次有篇博客讲了如何利用wireshark ...

  6. C#使用oledb连接excel运行Insert Into语句出现“操作必须使用一个可更新的查询”的解决的方法

    我错误发生时的环境:Windows 7,Framework 4.0,Microsoft Office 2007,VS2010,c# WinForm. 部分代码: string strConn = &q ...

  7. VFL语言简洁

    一.VFL语言简洁 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...

  8. LeetCode 557. Reverse Words in a String III (反转字符串中的单词 III)

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...

  9. B. Case of Fake Numbers( Codeforces Round #310 (Div. 2) 简单题)

    B. Case of Fake Numbers time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  10. PowerDesigner中导入MYSQL数据库结构的步骤及问题解决

    今天在使用PowerDesigner,要导入MySql的表结构到PowerDesginer里, 记录下详细的操作步骤: 1.首先要确保机器安装了MySql的ODBC驱动,去http://dev.mys ...