学习要点:

1.混合过度版

主讲教师:李炎恢

本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。

一.混合过渡版

混合版本的 Flexbox 模型是 2011 年提出的工作草案,主要是针对 IE10 浏览器实现的伸缩布局效果,其功能和旧版本的属性大同小异。我们还是采用上一节课的文件,然后使用混合过渡代码,实现 IE10 的伸缩布局。

首先,设置伸缩盒的 display 有如下两个属性值:

属性值

说明

flexbox

将容器盒模型作为块级弹性伸缩盒显示(混合版本)

inline-flexbox

将容器盒模型作为内联级弹性伸缩盒显示(混合版本)

//需要 IE 前缀-ms-

div {
display: -ms-flexbox;
}

1.flex-direction

flex-direction 属性和旧版本 box-orient 属性一样,都是设置伸缩项目的排列方式。

//设置从上往下排列

div {
-ms-flex-direction: column;
}

属性值

说明

row

设置从左到右排列

row-reverse

设置从右到左排列

column

设置从上到下排列

column-reverse

设置从下到上排列

2.flex-wrap

flex-wrap 属性类似与旧版本中的 box-lines,但是 box-lines 我们没有讲解,原因是没有浏览器支持它。

//设置无法容纳时,自动换行

div {
-ms-flex-wrap: wrap;
}

属性值

说明

nowrap

默认值,都在一行或一列显示

wrap

伸缩项目无法容纳时,自动换行

wrap-reverse

伸缩项目无法容纳时,自动换行,方向和 wrap 相反

3.flex-flow

flex-flow 属性是集合了排列方向和控制换行的简写形式。

//简写形式

div {
-ms-flex-flow: row wrap;
}

4.flex-pack

flex-pack 属性和旧版本中的 box-pack 一样,设置伸缩项目的对其方式。

//按照中心点对齐

div {
-ms-flex-pack: center;
}

属性值

说明

start

伸缩项目以起始点靠齐

end

伸缩项目以结束点靠齐

center

伸缩项目以中心点靠齐

justify

伸缩项目平局分布

5.flex-align

flex-align 属性和旧版本中的 box-align 一样,处理伸缩项目容器的额外空间。

//处理额外空间

div {
-ms-flex-align: center;
}

属性值

说明

start

伸缩项目以顶部为基准,清理下部额外空间

end

伸缩项目以底部为基准,清理上部额外空间

center

伸缩项目以中部为基准,平均清理上下部额外空间

baseline

伸缩项目以基线为基准,清理额外的空间

stretch

伸缩项目填充整个容器,默认

6.flex

flex 属性和旧版本中的 box-flex 类似,用来控制伸缩容器的比例分配。

//设置比例分配

p:nth-child(1) {
-ms-flex:;
} p:nth-child(2) {
-ms-flex:;
} p:nth-child(3) {
-ms-flex:;
}

7.flex-order

flex-order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

//设置伸缩项目顺序

p:nth-child(1) {
-ms-flex-order:;
} p:nth-child(2) {
-ms-flex-order:;
} p:nth-child(3) {
-ms-flex-order:;
}

第 29 章 CSS3 弹性伸缩布局[中]的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. CSS3弹性伸缩布局(中)——flexbox布局

    混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...

  8. CSS3弹性伸缩布局(下)——flex布局

    新版本 新版本的flex布局模型是2012年9月提出的工作草案,这个草案是由W3C推出的最新语法,这个版本立志于指定标准,让新式的浏览器全面兼容,在未来的浏览器更新换代中实现统一. 目前几乎大部分的浏 ...

  9. CSS3(5)---伸缩布局(Flex)

    CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...

随机推荐

  1. 搭建hexo博客

    hexo 是一款快速.简单.并且强大的博客博客模板框架 - 基于nodejs . 特点 基于nodejs 使用Markdown书写文章 无需数据库 可以使用GitHub Pages发布 要用到的模块 ...

  2. 1121冬至!!!巩固HTML基础第一堂

    今天只是把以前的知识巩固了一下.温故而知新,说的一点没错: 又新明白了一种居中对齐方法: 水平居中:align left(左侧对齐),center(居中对齐) 垂直居中:ralign top(上对齐) ...

  3. salesforce 零基础学习(十八)WorkFlow介绍及用法

    说起workflow大家肯定都不陌生,这里简单介绍一下salesforce中什么情况下使用workflow. 当你分配许多任务,定期发送电子邮件,记录修改时,可以通过自动配置workflow来完成以上 ...

  4. iReport 开发和运行所用版本不一致导致设置字体大小不起作用

    问题:开发环境使用 Win10 + iReport 5.6 ,运行环境使用 Win10 + iReport 5.2 ,设置字体的大小不起作用. 解决方法:开发环境和运行环境一致,都使用 iReport ...

  5. JS中实现数组和对象的深拷贝和浅拷贝

    数组的拷贝 > 数组的深拷贝,两层 var arr = [[1,2,3],[4,5,6],[7,8,9]]; var arr2 = []; 循环第一层数组 for(var i=0,len=arr ...

  6. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  7. CSS颜色模式转换器的实现

    前面的话 在CSS中,颜色的表示方式主要包括关键字.16进制.RGB模式.RGBA模式.HSL模式.HSLA模式.关于颜色模式的详细信息移步至此.本文就16进制.RGB模式及HSL模式的互相转换进行实 ...

  8. Java多线程系列--“JUC集合”08之 LinkedBlockingQueue

    概要 本章介绍JUC包中的LinkedBlockingQueue.内容包括:LinkedBlockingQueue介绍LinkedBlockingQueue原理和数据结构LinkedBlockingQ ...

  9. selenium-webdriver(python) (十六) --unittest 框架

    学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试(一)----selen ...

  10. Furatto – 轻量,友好的响应式前端开发框架

    Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...