flex元素内部文本溢出时 省略号代替溢出文本?(根据具体情况,额外添加flex-grow,min-width,max-width,width等属性)
// css部分代码
flex: 1 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: ;
max-width: ;
width: ;
办法总结:最好 先flex-grow: 1; 再加width。
flex 元素的宽度计算原理
1、一般情况下
min-width
属性默认值是0
,但是 Flexbox 容器中的 flex 项的min-width
属性默认值是auto
。2、Flex项的宽度是由元素自身尺寸、
flex-basis
设置的基础尺寸、以及外部填充(flex-grow
)或收缩(flex-shrink
)规则3者共同决定的。而自身尺寸与下面这几个方面有关:
box-sizing
盒模型;width
/min-width
/max-width
等CSS属性设置;content
内容(min-content最小宽度);
// 仅供参考,各种属性间的关系错综复杂!!!(以flex-grow,flex-basis进行比较。flex-shrink貌似无影响)
// flex元素默认width: 70px;
//1. flex: 0 80px;
max-width > min-width > 80px, 取min-width
max-width > 80px > min-width, 取flex-basis =80px
80px > max-width > min-width, 取max-width
// flex: 1 80px;
width(完全占据剩余空间)、
取min-width,max-width之中的最大值(包括 max-width < min-width 情形)
//2. flex: 0 0px; 或 flex: 0 0%;
min-width + (width或max-width)
// flex: 1 0px; 或 flex: 1 0%;
width(完全占据剩余空间)、或max-width
//3. flex: 0 auto;
width,或max-width
// flex: 1 auto;
width(完全占据剩余空间)、或max-width
flex-basis: 0%;
或者 flex-basis: 0;
就是表示 flex 项内容周围的空隙不会根据 flex-grow
按比例分配。和 flex-basis: auto
的区别见下图。