关于盒模型布局在UC上的兼容处理

这几天做移动项目，期间用了盒模型(flex)布局。在计算机上由于是用谷歌和火狐浏览器来调试，所以没发现什么问题，但是手机UC打开后，我整个人都不好了，盒模型布局全乱了。后来在网上查了一下关于盒模型的资料，发现大部分都说移动端不支持flex属性，更有甚者说只能换种布局方式。看到这些，我的内心是崩溃的，毕竟做了这么久的项目不能说改就改的。但是最终我还是找到了解决的办法，接下来跟大家分享一下我是如何解决这个问题的。下面是一个Demo，上代码先：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>Demo for flex on uc</title>
        <style type="text/css">
            html,
            body {
                padding: 0;
                margin: 0;
            }
            
            .demo1 {
                background-color: yellow;
                text-align: center;
                height: 80px;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                /* for uc */
                display: -webkit-box;
                -webkit-box-align: center;
            }
            
            .demo1>div {
                background-color: green;
                margin: 2px;
                -webkit-flex: 1;
                flex: 1;
                /* for uc */
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
            }
            
            .demo2 {
                background-color: yellow;
                 80px;
                height: 200px;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: column;
                flex-direction: column;
                -webkit-align-items: center;
                align-items: center;
                /* for uc */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
                box-orient: vertical;
                -webkit-box-align: center;
            }
            
            .demo2>div {
                background-color: green;
                 40px;
                margin: 2px;
                -webkit-flex: 1;
                flex: 1;
                /* for uc */
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
            }
        </style>
    </head>

    <body>

        <h2>左右排列，上下居中</h2>

        <div class="demo1">
            <div>flex</div>
            <div>flex</div>
            <div>flex</div>
            <div>flex</div>
            <div>flex</div>
        </div>

        <h2>上下排列，左右居中</h2>

        <div class="demo2">
            <div>flex</div>
            <div>flex</div>
            <div>flex</div>
            <div>flex</div>
            <div>flex</div>
        </div>

    </body>

</html>

代码已经有了，接下来读者可以亲自体验一下UC浏览的效果咯！是不是已经是你们想要的效果了？

不过，这里还有一个问题，就是demo1里的div的宽度会随文字的多少改变，不是我们想要的等分布局效果。其实，有一个最简单的解决办法，就是在demo1下的div里添加一个属性：(width：0%；)，即

.demo1>div {
    background-color: green;
    margin: 2px;
     0%;/*初始宽度都设为0%，这样就能保证每个宽度都一样了*/
    -webkit-flex: 1;
    flex: 1;
    /* for uc */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
}

然后你可以尝试将某个div里的文字增多，看看效果如何！

好了，这个问题就分享到这里了，希望能给读者带来小小的帮助，也希望大神多多指导！！！