flex: 1 居然不等分？CSS Flex 布局的隐秘陷阱

事故现场

短

中等长度文本

这是一段很长很长的文本内容

三个元素宽度不是 200px 均分，而是约 150px、200px、250px。

真正等分：强制忽略内容

.item {
flex: 1 1 0; /* flex-basis: 0，完全忽略内容宽度 /
/ 或写全 /
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px; / 注意是 0px，不是 0% */

min-width: 0; /* 关键！允许内容收缩到 0，防止溢出 /
overflow: hidden; / 配合省略号 */
text-overflow: ellipsis;
white-space: nowrap;
}