flex布局注意点:
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布局注意点:的更多相关文章
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
随机推荐
- centos7.0 没有netstat 和 ifconfig命令问题
yum install wget 运行 yum install net-tools 就OK了 默认CentOS已经安装了OpenSSH,即使你是最小化安装也是如此.所以这里就不介绍OpenSSH的 ...
- 打开开源项目总得.md文件
google了一些: 78 Tools for Writing and Previewing Markdown http://mashable.com/2013/06/24/markdown-too ...
- WPF:MenuItem样式
基础信息 1.MenuItem 样式 <Window.Resources> <Style TargetType="{x:Type MenuItem}"> & ...
- SQLITE3 使用总结
转自: http://blog.chinaunix.net/uid-8447633-id-3321394.html 前序: Sqlite3 的确很好用.小巧.速度快.但是因为非微软的产品,帮助文档总觉 ...
- python 补充-decode和encode
1. decode与encode转码 在Python3中默认编码就是uncode,encode转成Byte类型 在Python2中默认编码就是ascii window下默认编码是GBK decode( ...
- 20150618_Andriod _set Dialog_弹出式菜单
参考地址: http://blog.csdn.net/zhyl8157121/article/details/8169172 http://blog.csdn.ne ...
- noi 7627 鸡蛋的硬度
题目链接:http://noi.openjudge.cn/ch0206/7627/ 题目讲的二分其实是一个误导, d(i,j),表示当前最优策略时,最坏的情况下: 有 J 个鸡蛋,I 个可以怀疑的楼层 ...
- ural 1104,暴力取模
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1104 题目大意:输入一个字符串(数字与大写字母组成),输出n,n满足此字符串为n进制时, ...
- linux后台开发排错常用工具
一.前言 二.工具介绍 1.ps 查看进程信息 2.gstack 查看进程堆栈 3.pmap 查看程序分配的内存 4.ldd 查看程序用到的动态链接库 5.strace 用来跟踪和监视程序的每一个系统 ...
- 阿里巴巴Double分布式服务框架
开发人员梁飞的blog : http://javatar.iteye.com/ 梁飞关于Double框架的专访: http://www.iteye.com/magazines/103 Double项目 ...