CSS Flex布局中Row的space-between属性不生效问题求助

你的问题核心是.right容器没有占据足够空间，导致justify-content: space-between无法生效。只需调整两处CSS即可实现需求：

1. 给.right添加flex: 1，让它占据.header中除.left之外的全部可用宽度
2. 保留.header的display: flex，确保所有子元素在一行排列

修改后的完整CSS代码：

.header {
    background-color: yellow;
    display: flex;
    flex-wrap: nowrap; /* 强制不换行，默认值可省略，显式书写更清晰 */
}

.left {
    background-color: coral;
    /* 若需要固定宽度，可添加width: 120px; 按需调整数值 */
}

.right {
    background-color: aqua;
    display: flex;
    justify-content: space-between;
    flex: 1; /* 关键：拉伸容器填满剩余空间 */
    min-width: 0; /* 可选：防止内容溢出时容器被压缩，按需添加 */
}

HTML代码无需修改，运行后就能实现：

• .left固定在左侧
• .right-1和.right-2在.right容器内左右两端对齐，且整个布局保持在一行

原理说明 #

原代码中.right作为flex子元素，默认宽度仅包裹内部内容，所以justify-content: space-between没有足够空间展示效果。添加flex: 1后，.right会自动拉伸，填满.header的剩余宽度，此时内部的两个子元素就能通过space-between实现两端分隔。

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