3) CSS的columns在伸缩容器上没有效果。
4) float、clear和vertical-align在伸缩项目上没有效果。
例：移动端导航（居中，左右，自适应居中，自适应竖向排列）
CSS Code复制内容到剪贴板
<style type="text/css">
.nav{
background:#00BFFF;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
/*自适应竖向排列*/
-webkit-flex-flow:column wrap;
/* 所有列面向主轴起始位置靠齐 */
justify-content:flex-start;
/* 所有列面向主轴终点位置靠齐 */
justify-content:flex-end;
}
.nav a{
text-decoration:none;
display:block;
padding:1em;
color:#fff;
/*居中平铺*/
flex:1;
}
@media all and (max-width: 800px) {
.nav{
/* 所有列面向主轴两端位置平均分配 */
justify-content:space-around;
}
}
</style>
XML/HTML Code复制内容到剪贴板
<ul class="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
