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)
加载更多
留言
开源项目
- B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
- B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
- B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
- B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
- See also:gitee.com@b5net
最新评论
瀑布
:你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
瀑布
:你好,今天看到你的开源项目,很喜欢,感谢你的开源
冰舞
on Laravel定时任务的实现
:测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试
文章分类
标签