关于flex布局的目前兼容性写法

flex虽然使用起来很方便,但是他的兼容性由于历史版本的原因,一直很让人头疼,低版本IE就不用说了,webkit目前也不是所有版本都能支持同一写法,测试半天之后写了个差不多的写法,至少pc端高版本ie,chrome,firefox,opera,新版搜狗高速模式以及兼容模式都正常支持。移动端的webkit,UC,firefox都正常支持,由于手上没有winphone,暂时没测试移动端的IE。

<!DOCTYPE html>

<html>

<head>

<title>demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<style type="text/css">

.box{

width: 75%;

height: 50px;

background: #eee;

border:#ccc 1px solid;

margin: 20px auto;

padding: 5px;

display: -webkit-box;

display: -moz-box;

display: -o-box;

display: -ms-flexbox;

display: flex;

}

.item{

border:#ccc 1px solid;

margin: 0 5px;

height: 48px;

-moz-box-flex: 1;

-webkit-box-flex: 1;

-o-box-flex: 1;

-ms-flex: 1;

flex: 1;

}

</style>

</head>

<body>

<div class="box">

<div class="item"></div>

<div class="item"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

Vue入门基础之组件插槽(slot)使用

组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,slot就提供了极大的便利!下面看一下slot用法!

841
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之relative

1、relative和absolute的相煎关系   限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在over...

3308
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

1471
来自专栏无所事事者爱嘲笑

react-native flatlist 上拉加载onEndReached方法频繁触发的问题

4932
来自专栏一个小程序员的成长笔记

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html la...

4557
来自专栏WebDeveloper

这种div高度自适应确定你知道吗?

952
来自专栏破晓之歌

AJAX跨域完全讲解(需要java基础,暂不更新)

803
来自专栏十月梦想

边框阴影

681
来自专栏林德熙的博客

win10 uwp 横向 AppBarButton

一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把...

531
来自专栏十月梦想

Vue使用animation.css动画库

由于使用第三方库,需要使用指定class,所有要之定义class值,使用enter-active-class和leave-active-class,必须包括an...

1112

扫码关注云+社区