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. JSP直接连接sql2008数据库并显示

    <%@ page contentType="text/html; charset=utf-8" language="java" errorPage=&qu ...

  2. ubuntu下搭建JAVA开发环境【转】

    转自:http://jingyan.baidu.com/article/86fae346b696633c49121a30.html JAVA开发环境是一种跨平台的程序设计语言,可以在windows.L ...

  3. 29、Oralce(五)

    1)掌握PLSQL程序设计 2)掌握存储过程,函数和触发器 3)了解一些oralceSQL语句优化方案 ------------------------------------------------ ...

  4. PHP 页面编码声明与用header或meta实现PHP页面编码的区别

    php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("Content-type: text/html; charset=utf-8&quo ...

  5. 上传图片到阿里云OSS和获取上传图片的外网url的步骤

    啥都不说  直接上代码 1.html: <form action="/bcis/api/headImgUpload.json" method="post" ...

  6. YTU 3022: 完全二叉树(1)

    原文链接:https://www.dreamwings.cn/ytu3022/2595.html 3022: 完全二叉树(1) 时间限制: 1 Sec  内存限制: 128 MB 提交: 26  解决 ...

  7. poj1703 Lost Cows

    给定集合{1,2,...,n}的一个置换,指定每个位置上在其左方且比其小的数的个数,求该置换. 这题我目前还只会O(n^2)的做法. 以后再用更高效的算法解决. http://poj.org/prob ...

  8. JAVA基础知识之IO——Java IO体系及常用类

    Java IO体系 个人觉得可以用"字节流操作类和字符流操作类组成了Java IO体系"来高度概括Java IO体系. 借用几张网络图片来说明(图片来自 http://blog.c ...

  9. ip地址定位库

    ip2region 1.2.1 发布了,新增 Python 内存查询+数据文件更新. 准确率99.9%的ip地址定位库,0.0x毫秒级查询,数据库文件大小只有1.5M,提供了java, php, c, ...

  10. Oracle之ORA-00972: identifier is too long

    一.前言 今天在程序的日志中出现这个错误,网上搜了一下发现,说是Oracle的对象名字最多是30个字符,不能超过30,而我出错的sql是: "select * from test where ...