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. JAVA学习课本内容总结

    二.基本类型 数组 枚举 1.基本类型 逻辑类型 boolean (true/false) 整数类型 byte(8位)  short(16)  int(32)  long(64) 浮点类型 float ...

  2. BZOJ(1) 1003 [ZJOI2006]物流运输

    1003: [ZJOI2006]物流运输 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 9404  Solved: 4087[Submit][Stat ...

  3. Ubuntu查看和写入系统日志

    一.背景 Linux将大量事件记录到磁盘上,它们大部分以纯文本形式存储在/var/log目录中.大多数日志条目通过系统日志守护进程syslogd,并被写入系统日志. Ubuntu包括以图形方式或从命令 ...

  4. WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize

    中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...

  5. 一看就懂系列之 由浅入深聊一聊php的垃圾回收机制

    前言 是的,平时经常听到大牛说到的gc,就是垃圾回收器,全称Garbage Collection. 早期版本,准确地说是5.3之前(不包括5.3)的垃圾回收机制,是没有专门的垃圾回收器的.只是简单的判 ...

  6. ios dyld: Library not loaded: @rpath/xxx.framework/xxx 之根本原因

    碰到问题 dyld: Library not loaded: @rpath/xxx.framework/xxx Referenced from: /var/containers/Bundle/Appl ...

  7. BNU 13024 . Fi Binary Number 数位dp/fibonacci数列

    B. Fi Binary Number     A Fi-binary number is a number that contains only 0 and 1. It does not conta ...

  8. POI 读取word (word 2003 和 word 2007)（转，好用）

    POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...

  9. POJ2449 Remmarguts' Date 第K短路

    POJ2449 比较裸的K短路问题 K短路听起来高大上 实际思路并不复杂 首先对终点t到其他所有点求最短路 即为dist[] 然后由起点s 根据当前走过的距离+dist[]进行A*搜索 第k次到达t即 ...

  10. la3713

    2-sat...求解2-sat方案直接每个变量枚举就行了,lrj的代码很靠谱... #include<bits/stdc++.h> using namespace std; ; struc ...