Flex 布局中flex: 1导致子元素宽度动态变化的解析及解决方案
在使用 Flex 布局时，设置子元素flex: 1意图让它们平均分配可用空间。然而，当子元素内容变化时，宽度也随之改变，这并非总是期望的结果。
问题重现
以下代码片段展示了这个问题：
.container {
display: flex;
width: 120px;
}
.box {
flex: 1;
height: 30px;
background: red;
margin: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
短文本较长文本内容中等长度文本
当box元素包含的文本长度不同时，它们的宽度会动态调整以适应内容，导致并非平均分配空间。
解决方案：固定最小宽度
为了解决这个问题，我们需要为flex属性添加一个最小宽度参数，确保每个子元素至少占据一定的宽度。 修改flex属性为flex: 1 0 auto; 或 flex: 1 0 0;。
-
flex: 1 0 auto;flex-grow: 1; flex-shrink: 0; flex-basis: auto;允许元素根据可用空间增长，但不允许收缩，基准宽度自动计算。 -
flex: 1 0 0;flex-grow: 1; flex-shrink: 0; flex-basis: 0;允许元素增长，不允许收缩，基准宽度为0，元素宽度完全由flex-grow决定。
选择哪个取决于具体的布局需求。如果需要子元素根据内容自适应，但又希望它们至少占据一定宽度，则flex: 1 0 auto; 更合适。如果需要子元素严格平均分配空间，则flex: 1 0 0; 更合适。
通过添加最小宽度参数，即使子元素内容变化，其宽度也不会小于设定的最小值，从而避免了动态变化的问题，并能更好地控制布局。
