flex box 的基础使用

爱摔倒的企鹅

于 2016-05-23 11:54:26 发布

阅读量190

点赞数

分类专栏： CSS布局文章标签： flex 浏览器

本文链接：https://blog.csdn.net/qq_24070723/article/details/51480586

版权

CSS布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

flex box兼容性并不是非常好在各个浏览器上特别是ie，以及微信浏览器上的兼容性就。。。。。。。。。。。。。。。。。

demo【此案例在ie浏览器上就会不兼容】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .father{
            width: 100%;
            height: 300px;
            background-color: #29ABE2;
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-flow: row wrap;
        }
        .son{
            height: 100px;
            background-color:#FF4500 ;
            flex: 1;    
        }
    </style>
    <body>
        <div class="father"><div class="son" style="background:#8B008B"></div><div class="son"></div><div class="son" style="background-color: #3A3A3A;"></div>  </div>
    </body>
</html>

更改方案
（不过如果要使用最好只是使用它的基础等比分配，其他新旧属性对应复杂，通常一个属性就需要多条重复，才能满足）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>



        .father{
            width: 100%;
            background-color: #29ABE2;
            display:-ms-flexbox;
            display: flex;
            align-items: center;
            flex-direction:row;
            justify-content: space-between;
            flex-flow: row wrap;
        }
        .son{
            height: 100px;
            background-color:#FF4500 ;
            -ms-flex:2;
           -webkit-box-align:center;
            flex: 1;    
        }
    </style>
    <body>
        <div class="father"><div class="son"></div><div class="son" style="background-color: #3A3A3A;"></div><div class="son"></div><div class="son" style="background-color: #3A3A3A;"></div>   </div>
    </body>
</html>

爱摔倒的企鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex box 的基础使用

flex box兼容性并不是非常好在各个浏览器上特别是ie，以及微信浏览器上的兼容性就。。。。。。。。。。。。。。。。。demo【此案例在ie浏览器上就会不兼容】<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style>
复制链接

扫一扫