一、flexbox弹性盒子布局
兼容性:
- iOS可以使用最新的flex布局
- Android4.4以下,只能兼容旧版的flexbox布局
- Android4.4及以上,可以使用最新的flex布局
注:
- CSS的columns在伸缩容器上没有效果。
- float、clear和vertical-align在伸缩项目上没有效果。
首先还是从两个版本的语法开始讲吧。
<div class = "box">
<div class = "item">
</div>
</div>
新旧对比:
定义容器的display属性
旧版本写法
.box {
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari 和 Chrome */
display: box;
}
新版本写法
定义伸缩容器,是内联还是块取决于设置的值。这个时候,他的所有子元素将变成flex文档流,称为伸缩项目。
.box{
display: -webkit-flex;
display: flex;
}
.box{
display: -webkit-inline-flex;
display:inline-flex;
}
容器属性
旧版本写法
旧版本的属性和新版本的属性设置不同,具体如下:
1 . box-pack 属性:定义子元素主轴对齐
.box{
-moz-box-pack: center; /* Firefox */
-webkit-box-pack: center; /* Safari 和 Chrome */
box-pack: center;
}
box-pack: start | end | center | justify;
2 . box-align 属性:定义子元素交叉轴对齐方式。
.box{
-moz-box-align: center; /* Firefox */
-webkit-box-align: center; /* Safari 和 Chrome */
box-align: center;
}
box-align: start | end | center | baseline | stretch;
3 . box-direction 属性:定义子元素的显示方向。
.box{
-moz-box-direction: reverse; /* Firefox */
-webkit-box-direction: