三栏平均分布布局两条间隔线的实现思路

在这里插入代码片
CSS:
    <style>
        * {
     
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        ul {
     
            display: flex;
            width: 300px;
            height: 60px;
            align-items: center; //配套div 实现垂直居中
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
            border-radius: 2px;
        }

        li {
     
            flex: 1;
            border-left: 1px solid #D9D9D9; ** //设置左边线
            height: 36px;
            font-size: 12px;
            line-height: 14px;
            text-align: center; //文字居中
        }

        li:first-child {
     
            border: none; 
            //利用伪类清除 第一个li 的左边距 或者可以设置右边线 然后设置:last-child border:none	
        }

        .num {
     
            color: #333333;
            margin-bottom: 6px;
        }

        .text {
     
            color: #868686;
        }
    </style>
    
HTML:
    <ul>
        <li class="au">
            <div>//此处的div不是无意义 而是实现分栏的的垂直居中
                <div class="num">524</div>
                <div class="text">关注</div>
            </div>
        </li>
        <li class="au">
            <div>
                <div class="num">18705761</div>
                <div class="text">粉丝</div>
            </div>
        </li>
        <li>
            <div>
                <div class="num">1650</div>
                <div class="text">微博</div>
            </div>
        </li>
    </ul>

总结：
三栏平均分布思路：
1.父元素 align-items: center; //配套div 实现垂直居中
2.子元素 flex: 1;
三栏两线的思路：
border-left: 1px solid #D9D9D9; ** //设置左边线
然后利用:first-child border:0
或者border-right: 1px solid #D9D9D9; ** //设置右边线
然后利用:last-child border:0