web开发弹性盒模型flexbox新旧比较

一、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: