前言
CSS属性的兼容性,可在caniuse.com/ 查阅。
flex布局的使用,除非是极少数的低版本系统机,大部分手机端都是兼容的。
属性
flex的属性有flex-flow, flex-shrink, flex-grow, just-content, align-items等等,具体可自行搜索。
应用场景
如果要实现下面的布局,该如何使用flex呢?
要求左边文本长度不定,中间固定,右边文本不定。右边文本全部展示,中间文本距离右侧20px,距离左边文本最低16px。
左边文本长度超过则省略。
解决方案
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 不收缩