B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

flex布局实现一行中两个div宽度都不固定,但是其中一个全部显示,另一个超出隐藏

Published on:2022-06-01

当我们得需求如下图所示


一行两个div,宽度都是自适应得。但是右边的div永远全部显示出来,左边的div超出时出现省略号。主要使用flex的下面两个:

flex-grow :当父级有剩余时,进行填充

flex-shrink:当父级空间不足时用来收缩,当为0时,代表不收缩,全部展示出来


<style>
    ul {
        width: 300px;
        font-size: 14px;
        color: #333;
        list-style: none;
        padding: 20px;
        border: 1px solid #eee
    }

    li {
        padding: 10px;
        border-bottom: 1px dotted #ccc;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .title {
        width: 0;
        flex-grow: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .time {
        flex-shrink: 0;
        padding-left: 4px;
    }
</style>
<ul>
    <li>
        <div class="title">短时在两边</div>
        <div class="time">刚刚</div>
    </li>
    <li>
        <div class="title">文字较多时出现省略号,阿三大苏打收到阿大撒</div>
        <div class="time">2022-06-01</div>
    </li>
    <li>
        <div class="title">文字较多时出现省略号,阿三大苏打收到阿大撒</div>
        <div class="time">06-01</div>
    </li>
</ul>



上面就是title定一个为宽度为0的容器,但是又给了一个flex-grow,当又空余空间会将宽度增加占有剩余的

time定义了flex-shrink为0,没给宽度定义,自适应宽度,当空间不够时,会优先全部展示出来;挤压title的宽度


留言列表(0)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    奥德赛 on Electron+vue搭建项目或将vue项目转为electron :大声道奥术大师大声道
    cmf :我的qq 292864861
    cmf :你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
    laravel新手 :您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类