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-11-04 02:12:42

    genymotion免费版

    genymotion是一套完整的android虚拟环境工具,相对官方android sdk,它的安装和使用简洁方便不臃肿,但是现在genymotion官方网站不再提供个人的下载,这篇博客记录了如何下载和使用genymotion个人版.