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

最新推荐文章于 2024-04-07 14:11:15 发布

一朵红杏

最新推荐文章于 2024-04-07 14:11:15 发布

阅读量1.3w

点赞数 1

文章标签： mobile flex 布局 box 浏览器兼容

本文链接：https://blog.csdn.net/java_goodstudy/article/details/51435072

版权

最近在做项目开发时用到 , 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>

效果：
这里写图片描述

一朵红杏

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
flex 布局 justify-content:center; align:items; mobile 解决老版box 兼容性问题

最近在做项目开发时用到 , flex 布局，在华为手机的uc 浏览器中出现兼容性问题，解决方案如下，并提供一种垂直水平居中的方式，希望能给各位在移动端开发时带来便利，应用导航，左图右文父容器啊设置属性： -webkit-box-align: center; align-items: center; -webkit-box-pack: cen
复制链接

扫一扫