首页 > 代码库 > CSS3弹性伸缩布局(中)——flexbox布局
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: nowwrap;
-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布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。