【CSS】flex自适应布局 实现自动省略

1,071 阅读1分钟

前言

CSS属性的兼容性,可在caniuse.com/ 查阅。
flex布局的使用,除非是极少数的低版本系统机,大部分手机端都是兼容的。

属性

flex的属性有flex-flow, flex-shrink, flex-grow, just-content, align-items等等,具体可自行搜索。

应用场景

如果要实现下面的布局,该如何使用flex呢? 要求左边文本长度不定,中间固定,右边文本不定。右边文本全部展示,中间文本距离右侧20px,距离左边文本最低16px。
左边文本长度超过则省略。

image.png

解决方案

codepen codepen.io/bey1995/pen…

左侧容器

margin-right: 16px 
flex-shrink: 1 吸收剩余空间,同时
width: 0 用于自适应。
white-space: nowrap 限制换行
text-overflow: ellipsis 省略
overflow: hidden

中间容器

flex-shrink: 0 不收缩
margin-right: 20px 边距

右侧容器

flex-shrink: 0 不收缩