flex元素宽度计算原理，及内部文本ellipsis溢出截断

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 的区别见下图。