flex　兼容性写法兼容ie10 谷歌火狐

最新推荐文章于 2023-07-04 17:08:09 发布

秦璐璐

最新推荐文章于 2023-07-04 17:08:09 发布

阅读量1.1k

点赞数 1

分类专栏：知识文章标签： css

本文链接：https://blog.csdn.net/qinlulucsdn/article/details/105786168

版权

知识专栏收录该内容

139 篇文章 1 订阅

订阅专栏

本次记录的主要内容在于　兼容写法　

下面的测试代码为常用的；具体的属性值，按照实际需求，自行修改

需要注意的是在IE下如果要实现垂直居中的话父元素必须要设置高度或者设置高度auto

在其他浏览器设置min-height生效但是在IE下 min-height加垂直居中

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        /* 基本弹性盒子 */
        .demo{
            display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
            display: -moz-box; /* Firefox 17- */  
            display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
            display: -moz-flex; /* Firefox 18+ */  
            display: -ms-flexbox; /* IE 10 */  
            display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
        }

        /* 方向 横向*/
        .directionrow{
            -webkit-box-orient: vertical;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
        }

        /* 方向 竖向*/
        .directioncol{
            -webkit-box-orient: vertical;
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        /* 竖向剧中 */
        .align{
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        /* 横向剧中 */
        .justify{
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
        }

        /* 换行 */
        .wrap{
            -webkit-flex-wrap: wrap;  
            -moz-flex-wrap: wrap;  
            -ms-flex-wrap: wrap;  
            -o-flex-wrap: wrap;  
            flex-wrap: wrap;
        }

        /* 自适应 */
        .flex{
            width: 0;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        .demo{
            min-height:80px;
            border-bottom: 1px solid #000000;
            border-top: 1px solid #000000;
            width: 300px;
            margin:30px auto;
        }

        h1{
            width: 300px;
            margin:30px auto;
            text-align: center;
        }

        .demo-1{
            width: 40px;
            height: 40px;
            border: 1px solid #DDDDDD;
            margin: 5px;
        }   
    </style>
</head>
<body>
    <h1>横向排列(默认)</h1>
    <div class="demo directionrow">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>竖向排列</h1>
    <div class="demo directioncol">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>横向居中</h1>
    <div class="demo justify">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>垂直居中</h1>
    <div class="demo align">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>横向垂直居中</h1>
    <div class="demo align justify">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>不换行</h1>
    <div class="demo">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>换行</h1>
    <div class="demo wrap">
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
        <div class="demo-1"></div>
    </div>
    <h1>自适应（设置于子级）</h1>
    <div class="demo">
        <div class="demo-1"></div>
        <div class="demo-1 flex"></div>
        <div class="demo-1"></div>
    </div>
</body>
</html>

具体效果

秦璐璐

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex　兼容性写法兼容ie10 谷歌火狐

本次记录的主要内容在于　兼容写法　下面的测试代码为常用的；具体的属性值，按照实际需求，自行修改实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
复制链接

扫一扫