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. 轰炸III

    题目背景 一个大小为N*M的城市遭到了X次轰炸,每次都炸了一个每条边都与边界平行的矩形. 题目描述 在轰炸后,有Y个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几轮. ...

  2. poj 3074

    题意:解数独 分析: 完整的数独有四个充要条件: 1.每个格子都有填数字 2.每列都有1~9中的每个数字 3.每行都有1~9中的每个数字 4.每个9宫格都有1~9中的每个数字 可以转化成精确覆盖问题. ...

  3. 最小生成树 C - Building a Space Station

    You are a member of the space station engineering team, and are assigned a task in the construction ...

  4. zoj——2588 Burning Bridges

    Burning Bridges Time Limit: 5 Seconds      Memory Limit: 32768 KB Ferry Kingdom is a nice little cou ...

  5. python supervisor进程监控工具的使用

    supervisor —— a process control system 另外一个类似 supervisor的工具,因为supervisor 不兼容python3, !!! Circus Proc ...

  6. [JavaEE] Bootstrapping a JavaEE Application

    To bootsrap the application use the following Maven archetype: mvn -DarchetypeGroupId=org.codehaus.m ...

  7. varnish代理server笔记

    varnish是一款开源的代理server软件.和Squid的差别是採用内存进行数据缓存. 速度很的快,并且不easy崩溃.可是奔溃之后全部数据都消失,导致全部请求全部发送至后台server端,这是其 ...

  8. 分布式缓存Redis应用场景解析

    Redis的应用场景非常广泛.虽然Redis是一个key-value的内存数据库,但在实际场景中,Redis经常被作为缓存来使用,如面对数据高并发的读写.海量数据的读写等. 举个例子,A网站首页一天有 ...

  9. There was a conflict between

    解读,首先搜索到第一个5>的开头的那一行,确认是在编译哪一个项目. 那么后面的冲突,就是在和这个项目冲突. There was a conflict between "log4net, ...

  10. 【Silverlight】Bing Maps开发应用与技巧一：地图打点与坐标控件（CoordControl）

    [Silverlight]Bing Maps开发应用与技巧一:地图打点与坐标控件(CoordControl) 使用Bing Maps Silverlight Control开发中,很多时候都需要实现在 ...