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

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

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexdemotitle>

    <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>


<body>
    <ul class="container">
        <li>text1li>
        <li>text2li>
        <li>text3li>
        <li>text4li>
    ul>   
body>
html>

效果 :
flex 布局 justify-content:center; align:items; mobile 解决老版box 兼容性问题_第1张图片

你可能感兴趣的:(flex 布局 justify-content:center; align:items; mobile 解决老版box 兼容性问题)