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. 调用css时,用link 和 @import url 有什么区别

    加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...

  2. eclipse 利用已有c++代码建工程,并编译执行

    如果你想建一个带Makefile的c++ 工程 1. 新建一个C++空工程,工程类型是makefile project,选择Linux GCC: 2. 将源码连同makefile文件一同作为一个文件系 ...

  3. iOS 判断相机权限是否被限制,判断相机是否可以使用

    判断相机权限是否被限制 需要导入   AVFoundation 类 [objc] view plain copy #import <AVFoundation/AVFoundation.h> ...

  4. Mootools插件-闪烁的标题

    转自:http://www.cnblogs.com/see7di/archive/2012/10/09/2716024.html 回想起来,我已经好久没有写点啥了,尤其是关于Mootools方面的东西 ...

  5. 修改sql2005字段

    alter table 表名 add 字段名 数据类型 default 默认值 增加:alter table AdCategory ADD SEOTitleNo varchar(50); 删除:ALT ...

  6. windows上安装apache python mod_python

    综述:   windows上安装apache python mod_python的例子.教程甚至图解都不少:但作为新手还是会出错,而且一时无法快速排解. 在此笔者将根据自己的实践经验,给出几个需要注意 ...

  7. U3D刚体测试3(constraints)

    程序这边的接口: mRigidbody.constraints = RigidbodyConstraints.FreezePositionX | RigidbodyConstraints.Freeze ...

  8. livereload的简单使用

    一/直接使用:npm install -g livereload 全局安装 http-server  起到服务 livereload启动 在html中引入<script src="ht ...

  9. javascript中set与get方法详解

    其中get与set的使用方法: 1.get与set是方法,因为是方法,所以可以进行判断. 2.get是得到 一般是要返回的   set 是设置 不用返回 3.如果调用对象内部的属性约定的命名方式是_a ...

  10. Radar之字节流加载图片

    获取GUITexture GameObject _obj = GameObject.Find("Tex1"); GUITexture _tex = _obj.GetComponen ...