flex水平平分布局

2020-01-04 08:16:12

效果

 

HTML

    <ul class="box">
        <li class="b-title">标题一</li>
        <li class="b-title">标题二</li>
        <li class="b-title">标题三</li>
    </ul>

 

CSS

复制代码

        .box {
            display: flex;
        }

        .b-title {
            flex: 1;
            border: 1px solid red;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


  • 精彩推荐

  • 2019-06-24 06:22:10

    Android RecyclerView嵌套的滑动冲突问题

    这是一个简单的recyclerView嵌套recyclerView的demo， 很明显，子布局应该也是可以滑动的才对，但你滑动子布局却是父布局在滑动 这就是滑动冲突

  • 2019-07-02 21:55:47

    Nginx出现500 Internal Server Error 错误的解决方案

    Nginx 500错误（Internal Server Error 内部服务器错误）：500错误指的是服务器内部错误，也就是服务器遇到意外情况，而无法履行请求。 在高并发连接的情况下，Nginx是Apache服务器不错的替代品。Nginx同时也可以作为7层负载均衡服务器来使用。根据测试结果，Nginx 0.6.31 + PHP 5.2.6 (FastCGI) 可以承受3万以上的并发连接数，相当于同等环境下Apache的10倍。