flex 布局 justify-content:center; align:items; mobile 解决老版box 兼容性问题

最新推荐文章于 2025-10-01 22:54:27 发布

原创最新推荐文章于 2025-10-01 22:54:27 发布 · 1.4w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mobile #flex #布局 #box #浏览器兼容

本文探讨了在移动端开发中遇到的Flex布局在华为手机UC浏览器中的兼容性问题，并提供了有效的解决方案。特别介绍了如何通过设置CSS属性实现内容的垂直水平居中，为应用导航、左图右文等布局提供了便利。

最近在做项目开发时用到 , flex 布局 ，在华为手机的uc 浏览器中出现兼容性问题 ，解决方案如下，并提供
一种垂直水平居中的方式，希望能给各位在移动端开发时带来便利，应用导航，左图右文

父容器啊设置属性：

    -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            background: red;
            /*--------此处让ul包裹内容，给上下padding 值 要比给定值高度更好 --*/
            padding: 10px 0;
            -webkit-box-flex: 1;
            display: -webkit-flex;
            display: flex;

子元素属性如下


            -webkit-flex:1;
            -webkit-box-flex: 1;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexdemo</title>

    <style type="text/css">
        .container{
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            background: red;
            /*---------------------------------此处让ul包裹内容，给上下padding 值 要比给定值高度更好 ----------------------------------------*/
            padding: 10px 0;
            -webkit-box-flex: 1;
            display: -webkit-flex;
            display: flex;
        }
        li{
            list-style: none;
            -webkit-flex:1;
            -webkit-box-flex: 1;
            flex: 1;
            border-right: 1px solid gray;
            text-align: center;
        }

    </style>

</head>

<!-- box-sizing:border -->
<body>
    <ul class="container">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
    </ul>   
</body>
</html>

效果：
这里写图片描述