Login
网站首页 > 文章中心 > 其它

cssdisplayflex

作者:小编 更新时间:2023-07-16 13:12:51 浏览量:194人看过

至于实际中的用法,举个例子:

div

cssdisplayflex-图1

{

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相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章