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的草案阶段,并且它分为 ...
随机推荐
- 【转】Lucene.NET详细使用与优化详解
1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工 ...
- 用javascript实现base64编码器
前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...
- JNDI常见配置方式
JNDI(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API.命名服务将名称和对象联系起来,使得我们可以用 ...
- 我的Node.js学习历程
学习一门技术,每个人都有每个人的方法.我的方法很简单,做项目. 基本概念 在搭建一个node网站之前,还是要掌握一些基本的概念的,这里列举一下,具体的内容大家自己到网上去查: npm bower ex ...
- Python实现Windows定时关机
是最初的几个爬虫,让我认识了Python这个新朋友,虽然才刚认识了几天,但感觉有种莫名的默契感.每当在别的地方找不到思路,总能在Python找到解决的办法.自动关机,在平时下载大文件,以及跑程序的时候 ...
- WP8.1小梦词典开发2:百度翻译API使用
原文出自:http://www.bcmeng.com/api2/ 小梦昨天和大家分享了WP8.1金山词霸API使用方法,今天继续分享windows phone 8.1中百度翻译API的使用方法.和昨天 ...
- iOS开发之单例模式
1.概述 单例模式是一种常用的软件设计模式,通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源. 如果希望系统中某个类的对象只能存在一个,单例模 ...
- Appium手势密码滑动之Z字形走势(java篇)
1.直接使用负的偏移量appium会报错,在后面加上moveto(1,1)就行了 2.直接看图说话 废话少说看代码如: List<AndroidElement> element = dri ...
- Verilog读写文件
在通过编写Verilog代码实现ram功能时,需要自己先计算寄存器的位数和深度再编写代码. 而如果需要在编写的ram中预置值的话,就需要使用Verilog语言编写程序读写文件,来将相应的数据赋给寄存器 ...
- JQ实战一之烟花
本次的效果大概为当用户点击网页时,网页下方弹出一个类似烟花的长条条,然后在桌面上散开以达成类似烟花的特效.话不多说先上图. 首先布局,布局很简单 <style> body { backgr ...