混合过渡版

上一篇我们主要讲了旧版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布局的更多相关文章

  1. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  2. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  3. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  4. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  5. 第 29 章 CSS3 弹性伸缩布局[中]

    学习要点: 1.混合过度版 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.混合过渡版 混合版本的 Flexbox 模型 ...

  6. 第 29 章 CSS3 弹性伸缩布局[下]

    学习要点: 1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.新版本 新版本的 Flexbox 模型是 201 ...

  7. 第 29 章 CSS3 弹性伸缩布局[上]

    学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的 ...

  8. 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 ...

  9. CSS3弹性伸缩布局(上)——box布局

    布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...

随机推荐

  1. 单发邮箱 群发邮箱 程序 Email winform

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  2. Logistic Regression理论总结

    简述: 1. LR 本质上是对正例负例的对数几率做线性回归,因为对数几率叫做logit,做的操作是线性回归,所以该模型叫做Logistic Regression. 2. LR 的输出可以看做是一种可能 ...

  3. 第一章:shiro简介

    1.1 简介 Apache Shiro是java的一个安全框架,相当简单,没有Spring Security功能强大,但是实际工作中大多使用shiro就够了.可以帮助我们完成:认证,授权,加密,会话管 ...

  4. webpack使用总结

    我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码. 一般来说需要引入css-loader和styl ...

  5. Spring MVC ajax:post/get 的具体实现

    Post 方式 1.自动注入 a. pom.xml ---- 配置Maven,添加必要的jar包 <!--用于 String-JSONObject 转换 --> <dependenc ...

  6. angular替代Jquery,常用方法支持

    1.angular.bind(self,fn.args);   切换作用域执行 2.angular.copy(source,[destination]);   拷贝和深度拷贝 3.angular.eq ...

  7. webp转png或jpg

    在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...

  8. Linux命令的复习总结学习

    1.-------------------------linux系统介绍------------------------------------------------------- Linux是一套 ...

  9. javascript里的几种常见的数组方法

    Array()的几种方法 1.splice(2,3,4)删除数组中任意项(三个参数). 2.splice(1,3)删除从第一项开始的往后三项(两个参数).(splice可以结合pop(),unshif ...

  10. Activity栈与任务管理探究1——栈与任务的概述

    Activity栈与任务管理探究1--栈与任务的概述 内容概览 1. 前言 2. Activity中的Stack 3. Activity中的Task 4. Activity栈与任务管理基本原则 1. ...