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: nowrap;

-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布局才是重头戏，记得持续关注哦！