至于实际中的用法,举个例子:
div
{
width:300px;
border:1px solid black;
}
#p1
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
#p2
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
Hello
World
运行结果:
区别如念宴下:
也就是说,如果要兼容2012年之前的浏览器版本需要使用州伏box, 反之使用flex即可。纳纳
box语法2012年以后已经被抛弃。
在css中,我们可以穗册使用flex去实现垂直居中,但是flex并不是一个很好的方法,现在很多浏览器并不支持flex,例如IE8,9。
css代码:谨孙
body{background:#999}
.flexboximg{width:100px;height:100px;align-items:center;}
如果情况容许的话,可以用以下方法,兼容性更好:
body{background:#ccc;}
.posdiv{width:300px;height:250px;background:#fff;position:relative;margin:0auto}
.posdivimg{width:100px;position:absolute;top:50%;margin-top:-50px;}
以上就是土嘎嘎小编大虾米为大家整理的cssdisplayflex相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!