学习要点:1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。 一.新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C ...
学习要点:
1.新版本
主讲教师:李炎恢
本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。
一.新版本
新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现了统一。
首先,设置伸缩盒的 display 有如下两个属性值:
属性值 | 说明 |
flex | 将容器盒模型作为块级弹性伸缩盒显示(新版本) |
inline-flex | 将容器盒模型作为内联级弹性伸缩盒显示(新版本) |
//大部分不需要前缀
div { display: flex;}
属性值 | 说明 |
row | 设置从左到右排列 |
row-reverse | 设置从右到左排列 |
column | 设置从上到下排列 |
column-reverse | 设置从下到上排列 |
2.flex-wrap
flex-wrap 属性类似与旧版本中的 box-lines,但是 box-lines 我们没有讲解,原因是没有浏览器支持它。
//设置无法容纳时,自动换行
div { -ms-flex-wrap: wrap;}
原标题:第 29 章 CSS3 弹性伸缩布局[下]
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。