flex实现三栏等分布局

前言

在实际开发中，我们经常会想要实现的一种布局方式就是三栏等分布局，那么我们如何来解决这个问题呢？

解决

方法一：flex

外层容器也就是ul设置display:flex，对项目也就是li设置flex：auto，代表 flex: 1 1 auto

复制代码

<style>
        * {
            list-style: none;
            border: 0; 
            padding: 0;
            margin: 0
        }
        ul {
            width: 500px; 
            height: 200px; 
            background: red; 
            display: flex; 
            margin: auto; 
            margin-top: 100px; 
            padding: 0 10px;
            align-items: center;
        }
        li {
            background: green; 
            height: 100px; 
            width: 500px; 
            display: inline-block; 
            margin: 2px;
            line-height: 100px;
            text-align: center;
　　　　　　　flex: auto
        }

</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

复制代码

 

效果图：

解析：我们注意到width的设置，外层ul是500，li也是500，但是实际看到的确实li平分了ul的宽度，这是因为设置了flex：auto，代表有剩余空间的话项目等分剩余空间放大，空间不足项目等比例缩小

方法二：flex

同上，只不过将flex设置为 1 1 33.33%

复制代码

<style>
        * {
            list-style: none;
            border: 0; 
            padding: 0;
            margin: 0
        }
        ul {
            width: 500px; 
            height: 200px; 
            background: red; 
            display: flex; 
            margin: auto; 
            margin-top: 100px; 
            padding: 0 10px;
            align-items: center;
        }
        li {
            background: green; 
            height: 100px; 
            width: 500px; 
            display: inline-block; 
            margin: 2px;
            line-height: 100px;
            text-align: center;
　　　　 　　 flex: 1 1 33.33%;
        }

</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

复制代码

效果图：

 

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

基于仓颉编程语言+DeepSeek实现智能聊天助手开发秘籍

avatar 华为开发者空间
cover

华为云Tokens服务全面接入384超节点，以“大杂烩”优势打造先进算力

avatar 华为开发者空间

云闪付联合HarmonyOS SDK打造更便捷安全的支付体验

（Scan Kit），作为软硬协同的系统级扫码服务，Scan Kit应用了多项计算机视觉和AI技术，不仅实现了远距离自动扫码，同时还对各种复杂扫码场景（如暗光、污损、模糊、小角度、曲面码等）做了识别优化。比如扫码时，云闪付可以选择二维码的图片识别，减少用户找二维码的时间。云闪付是由各商业银行、产业各方与中国银联共建共享的移动支付产品，通过聚合银行业资源与银联广阔网络，覆盖更广阔的服务场景，如商超、

avatar 华为开发者空间