【css-tricks】从 flex 子元素超出父级(容器)宽度,探其原理 flex:1 时 width 的作用
场景一:文本超出省略
很常见的业务场景,比如一段图文描述中,标题做超长处理
超长时,可能会出现
<style> |
这里看出
flex-container
宽度超过了flex-box
,如何解决也很简单,看看网上给的方案:
.flex-container { |
flex: 1; 时 width 的作用?
flex: 1;
=>flex:1 1 auto
=> flex-grow: 1; flex-shrink: 1; flex-basis: auto;
看下 MDN 的flex-grow
的对剩余空间
的解释
再看 flex-basis: auto;
结论
如果 flex 元素没有设置尺寸(width、min-width …)时,flex 元素的内容尺寸超过平均分配的剩余空间时,则此时的宽度即为内容尺寸(当前元素大小 = max-content)。如果设置了尺寸并且尺寸小于
可用的平均分配的剩余空间时,则元素尺寸为该空间大小。
当 flex: 1; 时,相当于 剩余空间大小 = 父元素(容器)的宽度
则 剩余空间的大小 = 父元素的宽度 / 元素的个数
即 直接设置 width: 0
可以保证元素宽度平方父元素的宽度
https://segmentfault.com/q/1010000014919583
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 kshao-blog-前端知识记录!
评论