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 ...
随机推荐
- UTF8转码, 考虑利用app转好再传, CC2541转太麻烦了...
- Oracle将表keep到内存
一.引言: 有时候一些基础表需要非常的频繁访问,尤其是在一些循环中,对该表中的访问速度将变的非常重要.为了提高系统的处理性能,可以考虑将一些表及索引读取并保存到内存中. 二.关于keep内存的几个参数 ...
- Python+Django+Eclipse 在Windows下快速开发自己的网站
一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...
- 测试-关于Unity获取子层级内容的几种接口(Transform FindChild, Component GetComponentInChildren,...)
测试常用的层级内组件查找接口,但一些需求还是需要扩展 比如按照名称批量查找节点,查找接口对象等 1.Transform - Transform Find(string name) 可以直接根据名称搜索 ...
- C#'~'按位取反运算符的使用
按位取反运算符是按照二进制的每一位取反,比如byte类型,~0的结果就是255. 该功能可以在mask中做一些反转操作 如下代码,a存放了2,4,8三个值.用按位取反'~'运算符反转 打印结果是 fa ...
- h264
H264--编码原理以及I帧B帧P帧--1 前言 ----------------------- H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称,在编码方面,我理解的他的理论 ...
- HTML 5 Web Sockets应用初探
转载不错的http://developer.51cto.com/art/201008/217874.htm
- 干净的卸载Oracle
一.在oracle11G以前卸载oracle会存在卸载不干净,导致再次安装失败的情况,在运行services.msc打开服务,停止Oracle的所有服务. 二. oracle11G自带一个卸载批处理\ ...
- P1119 灾后重建
题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...
- MySQL基础(五)——视图
MySQL基础(五)--视图