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. hadoop概述测试题和基础模版代码

    hadoop概述测试题和基础模版代码 1.Hadoop的创始人是DougCutting?() A.正确 B.错误答对了!正确答案:A解析:参考课程里的文档,这个就不解释了2.下列有关Hadoop的说法 ...

  2. Dijkstra 算法、Kruskal 算法、Prim算法、floyd算法

    1.dijkstra算法 算最短路径的,算法解决的是有向图中单个源点到其他顶点的最短路径问题. 初始化n*n的数组. 2.kruskal算法 算最小生成树的,按权值加入 3.Prim算法 类似dijk ...

  3. PANIC : Error configuring AvalonLogSystem :

    ll /tpsys/weblogic/user_projects/domains/mall/velocity.log 有1.7版本的的,不用这个1.4的.1.4会有这个问题: PANIC : Erro ...

  4. ubunt1204安装配置vsftp

    本文将搭建一个最简单的ftp服务,即通过root用户可进行登录.上传.下载,具体步骤如下: 1.安装vsftpd服务 sudo apt-get install vsftpd 2.编辑vsftp配置文件 ...

  5. ug-Assertion failure in [MyClass layoutSublayersOfLayer:]

    这是在iOS7上,tableview 的sectionHeaderView中报错 *** Assertion failure in -[****.****UITVSectionHeader_Team ...

  6. Java实现批量修改文件名称

    import java.io.File; import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; /** ...

  7. ACM题目————最短路径问题

    Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的. Input 输入n,m,点 ...

  8. Wormholes 分类: POJ 2015-07-14 20:21 21人阅读 评论(0) 收藏

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 35235   Accepted: 12861 Descr ...

  9. Linux多线程同步机制

    http://blog.163.com/he_junwei/blog/static/19793764620141711130253/ http://blog.csdn.net/h_armony/art ...

  10. Poj(1274),二分图匹配

    题目链接:http://poj.org/problem?id=1274 The Perfect Stall Time Limit: 1000MS   Memory Limit: 10000K Tota ...