如何仅让Flex布局中的中间子组件实现响应式显示？

要实现中间子组件自适应收缩且文本溢出显示省略号，只需调整CSS的flex属性和文本溢出样式，具体修改如下：

修改后的CSS代码 #

.Container{
    display: flex;
    flex-direction: row;
    background-color: white;
    padding: 20px;
    gap: 10px;
    /* 移除space-evenly，改为让flex子元素自动分配空间 */
}

.Text1{
    flex: 0 0 100px; /* 固定宽度，不收缩不放大 */
    white-space: nowrap; 
}
.Text2{
    flex: 1; /* 占据父容器剩余所有空间 */
    text-align: left;
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
    white-space: nowrap; /* 强制文本单行 */
    /* 如果需要多行省略，可替换为以下代码（需注意浏览器兼容性）：
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示2行 */
    -webkit-box-orient: vertical;
    */
}
.Text3{
    flex: 0 0 100px; /* 固定宽度，不收缩不放大 */
}

关键修改说明 #

• 父容器：移除justify-content: space-evenly，该属性会强制子元素均匀分布空间，导致移动端空间不足时布局错乱；保留gap维持子元素间距。
• Text1和Text3：用flex: 0 0 100px替代固定width，明确指定这两个元素不收缩、不放大，始终保持100px宽度，确保两侧内容稳定显示。
• Text2：设置flex: 1让它自动填充父容器剩余空间；通过overflow: hidden、text-overflow: ellipsis、white-space: nowrap实现单行文本溢出省略效果。若需多行省略，可注释单行样式，启用注释中的多行兼容代码。

修改后，移动端设备上中间的Text2会自动根据剩余宽度收缩，文本超出时显示省略号，两侧元素保持固定宽度，整体布局不会错乱。

内容的提问来源于stack exchange，提问作者Abby