1.父元素display:flex之后成为伸缩容器,子元素(除了position:absolute或fixed)无论是display:block或者display:inline,都成为了伸缩项目。
2.可以固定一个伸缩项目的宽度,另一个伸缩项目自适应。
3.伸缩项目之间的空白自适应。
4.可以很方便进行水平和垂直方向的,居左,居中,居右,两边对齐等效果。
5.android浏览器4.4之前对于flex布局支持不好。
6.伸缩项目之间,没有inline-block元素之间的空隙。
7.伸缩项目自动box-sizing:border-box。

参考链接:

http://www.w3.org/html/ig/zh/css-flex-1/

http://www.w3cplus.com/blog/666.html

http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html

flex布局注意点:的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  10. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

随机推荐

  1. Nagios监控Oralce

    一.本文说明: 本文是监控本地的Oracle,其实监控远端的Oracle也是跟下面的步骤差不多的. 二.安装Nagios.Nagios插件.NRPE软件: 安装步骤可以参考<Linux下Nagi ...

  2. ectouch第十讲 之ecshop中 dwt, lbi 文件详解

    原文:http://www.yunmoban.cn/article-241.html Ecshop包括的文件夹有admin.api.cert.data.images.includes.js. lang ...

  3. word 排版问题

    1.wps word为何设置了页边距后下面的页边距不变呢 在章节选项卡中,查看章节导航,有可能是文档分节了,光标所在的节已经调整,而你看到页是另一节 2.分栏 选中你要进行分栏的内容,进行分栏,也可以 ...

  4. c# TCPclient

    服务端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

  5. c#xml追加读取节点

    读取 if (File.Exists("Book.xml")) { XmlDocument doc = new XmlDocument(); doc.Load("Book ...

  6. (翻译)理解Java当中的回调机制

    原文地址:http://cleancodedevelopment-qualityseal.blogspot.com/2012/10/understanding-callbacks-with-java. ...

  7. jquery 判断checkbox是否为空的三种方法

    //方法一: if ($("#checkbox-id")get(0).checked) { // do something } //方法二:也适用于单选按钮 if($('#chec ...

  8. hdu1081 To the Max

    直接暴力枚举所有子矩形至少需要O(n^4)的复杂度,显然这不是一个合理的解决方法. 上述方案忽略了矩形之间的联系,进行了过多不必要的计算. 实际上如果固定矩形的左右边界,则底边在i行的矩形内数值之和与 ...

  9. HDU(3790),最短路二级标准

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3790 最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    ...

  10. C#窗体四边框阴影效果的实现

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...