CSS3弹性伸缩布局(中)——flexbox布局
混合过渡版
上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局。
混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功能大同小异。
在这里我们还是采用上一篇的文件,使用混合过渡代码实现IE10的伸缩布局。
首先,我们要设置伸缩盒display属性,它有两个值
因为是针对IE10浏览器的,Chrome,Firefox,Opera不支持,所以我们用IE浏览器来做测试
div{
display: -ms-flexbox;
}
下面我们来测试下过渡版本的属性吧
1.flex-direction
//flex-direction和我们上一篇博客中的box-orient属性一样,设置伸缩项目的排列方式
四个值我们都试试吧
-ms-flex-direction: row;
-ms-flex-direction: row-reverse;
-ms-flex-direction: column;
-ms-flex-direction: column-reverse;
2.flex-wrap
//类似于旧版本的base-line,但是我上一篇没有讲base-line,因为没有浏览器支持它
当我们缩小浏览器时,默认效果如下,不换行
-ms-flex-wrap: nowrap;
-ms-flex-wrap: wrap;//换行
-ms-flex-wrap: wrap-reverse;//换行,换到上一行
3.flex-flow
//前面两个属性的简写方式
-ms-flex-flow: row wrap;
4.flex-pack
//flex-pack和旧版本的box-pack一样,设置项目的分布方式
就只试一个吧
-ms-flex-pack: end;
5.flex-align
//同旧版的box-align,设置处理伸缩项目的额外空间
我们就只试下center,其他读者可自行尝试
-ms-flex-align: center;
6.flex
//同旧版本的box-flex,设置分配伸缩项目的比例
p:nth-child(1){
-ms-flex:1;
}
p:nth-child(2){
-ms-flex:3;
}
p:nth-child(3){
-ms-flex:1;
}
7.flex-order
//同旧版本的box-ordinal-group,用来控制伸缩项目的出现顺序
p:nth-child(1){
-ms-flex:1;
-ms-flex-order:3;
}
p:nth-child(2){
-ms-flex:3;
-ms-flex-order:2;
}
p:nth-child(3){
-ms-flex:1;
-ms-flex-order:1;
}
小结
这一篇关于过渡版的就到此结束了,下一篇新版flex布局才是重头戏,记得持续关注哦!
CSS3弹性伸缩布局(中)——flexbox布局的更多相关文章
- CSS3弹性伸缩布局(二)——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- 第 29 章 CSS3 弹性伸缩布局[中]
学习要点: 1.混合过度版 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.混合过渡版 混合版本的 Flexbox 模型 ...
- 第 29 章 CSS3 弹性伸缩布局[下]
学习要点: 1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.新版本 新版本的 Flexbox 模型是 201 ...
- 第 29 章 CSS3 弹性伸缩布局[上]
学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的 ...
- CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group
css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...
- CSS3弹性伸缩布局(上)——box布局
布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...
随机推荐
- linux计算程序运行时间
转自: http://www.cnblogs.com/NeilHappy/archive/2012/12/08/2808417.html #include <sys/time.h> int ...
- kali linux qq 2013
按照网上的教程折腾了好几个小时,都没有搞定的qq for linux 在意外的尝试中成功了 文章有参考网友教程的部分:http://xiao106347.blog.163.com/blog/stati ...
- 说说API的防重放机制
说说API的防重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击.重放攻击是什么呢?就是把你的请求原封不动地再发送一次,两次...n次,一般正常的请求都会通过验证进入到正常逻辑中,如果 ...
- Android全局异常捕捉
// 定义自定义捕捉 package com.xiaosw.test; import java.io.File; import java.io.FileOutputStream; import jav ...
- JavaScript实现
JavaScript实现 Javascript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多.没错, ...
- iOS开发之如何修改导航栏的内容
导航栏的内容由栈顶控制器的navigationItem属性决定. UINavigationItem有以下属性影响着导航栏的内容(通常在子控制器中viewDidLoad方法中调用这些方法): 左上角的返 ...
- 使用MyBatis对数据库中表实现CRUD操作(二)
一.使用MyBatis对表实现CRUD操作 1.定义sql映射 userMapper.xml <?xml version="1.0" encoding="UTF-8 ...
- linux shell 找端口号及对应的进程
#!/bin/bash#author:zhongyulin#crteate-time:2016-10-20 netstat -lnpt|grep -v grep>/tmp/script/nets ...
- 《InsideUE4》UObject(五)类型系统信息收集
在一起!在一起! 引言 前文中我们阐述了类型系统构建的第一个阶段:生成.UHT分析源码的宏标记并生成了包含程序元信息的代码,继而编译进程序,在程序启动的时候,开始启动类型系统的后续构建阶段.而本文我们 ...
- lucene原理及源码解析--核心类
马云说:大家还没搞清PC时代的时候,移动互联网来了,还没搞清移动互联网的时候,大数据时代来了. 然而,我看到的是:在PC时代搞PC的,移动互联网时代搞移动互联网的,大数据时代搞大数据的,都是同一伙儿人 ...