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. 【secureCRT】设置自动连接会话+设置自动连接上次使用的会话:

  2. sql server 2012 自定义聚合函数(MAX_O3_8HOUR_ND) 计算最大的臭氧8小时滑动平均值

    采用c#开发dll,并添加到sql server 中. 具体代码,可以用visual studio的向导生成模板. using System; using System.Collections; us ...

  3. Hadoop集群管理之内存管理

    1.内存 Hadoop为各个守护进程(namenode,secondarynamenode,jobtracker,datanode,tasktracker)统一分配的内存在hadoop-env.sh中 ...

  4. Greenplum迁移到配置不同的GP系统

    要使用gp_restore或gpdbrestore并行恢复操作,恢复的系统必须与备份的系统具有相同的配置(相同数量的Instance).如果想要恢复数据库对象和数据到配置不同的系统(比如系统扩展了更多 ...

  5. [ios][swift]swift GPS传感器的调用

    在Info.plist文件中添加如下配置:(1)NSLocationAlwaysUsageDescription(2)NSLocationWhenInUseUsageDescription swift ...

  6. 错误Mybatis 元素类型为 "resultMap" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminat

    今天算是见识了什么事顺序的重要性. 在使用mybatis时由于联合了其他的表,用到了resultMap,之后外加association这一项.可是在替换对应字段的位置上加上association总是报 ...

  7. Ubuntu镜像使用帮助

    包括各个版本 http://mirrors.163.com/.help/ubuntu.html

  8. c++中函数empty()怎么使用

    string s = "";if (s.empty()){ cout << "字符串为空..";}else{ cout << " ...

  9. 2016年11月16日 星期三 --出埃及记 Exodus 20:7

    2016年11月16日 星期三 --出埃及记 Exodus 20:7 "You shall not misuse the name of the LORD your God, for the ...

  10. 怎样实现UIView的旋转

    首先创建界面,在viewDidLoad创建view以及button 相关代码如下 -(void)viewDidLoad { [super viewDidLoad]; viewDemo = [[UIVi ...