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的草案阶段,并且它分为 ...
随机推荐
- 单发邮箱 群发邮箱 程序 Email winform
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- Logistic Regression理论总结
简述: 1. LR 本质上是对正例负例的对数几率做线性回归,因为对数几率叫做logit,做的操作是线性回归,所以该模型叫做Logistic Regression. 2. LR 的输出可以看做是一种可能 ...
- 第一章:shiro简介
1.1 简介 Apache Shiro是java的一个安全框架,相当简单,没有Spring Security功能强大,但是实际工作中大多使用shiro就够了.可以帮助我们完成:认证,授权,加密,会话管 ...
- webpack使用总结
我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码. 一般来说需要引入css-loader和styl ...
- Spring MVC ajax:post/get 的具体实现
Post 方式 1.自动注入 a. pom.xml ---- 配置Maven,添加必要的jar包 <!--用于 String-JSONObject 转换 --> <dependenc ...
- angular替代Jquery,常用方法支持
1.angular.bind(self,fn.args); 切换作用域执行 2.angular.copy(source,[destination]); 拷贝和深度拷贝 3.angular.eq ...
- webp转png或jpg
在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...
- Linux命令的复习总结学习
1.-------------------------linux系统介绍------------------------------------------------------- Linux是一套 ...
- javascript里的几种常见的数组方法
Array()的几种方法 1.splice(2,3,4)删除数组中任意项(三个参数). 2.splice(1,3)删除从第一项开始的往后三项(两个参数).(splice可以结合pop(),unshif ...
- Activity栈与任务管理探究1——栈与任务的概述
Activity栈与任务管理探究1--栈与任务的概述 内容概览 1. 前言 2. Activity中的Stack 3. Activity中的Task 4. Activity栈与任务管理基本原则 1. ...