绝对定位下Flexbox无法自动占满宽度的原因咨询

核心本质：元素宽度的计算规则差异 #

下面结合你给出的三个场景逐一分析：

1. 基础布局场景

默认状态下，<div>是块级元素，块级元素的宽度默认会撑满父容器的可用宽度（这里父容器是body）。因此flex容器.container占满了body的横向空间，justify-content: space-between有足够的多余空间分配，自然能把两个子元素分别推到容器的左右两端。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            position: relative;
        }
        .container {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item"> hello</div>
    <div class="item"> hi</div>
</div>

</body>
</html>

2. 仅设置绝对定位的容器场景

当给元素添加position: absolute后，元素会脱离正常文档流，此时它的宽度计算规则完全改变：不再遵循块级元素“撑满父容器”的逻辑，而是由内部内容的总宽度决定。

这时候flex容器的宽度刚好包裹两个子元素的内容，没有多余的横向空间，justify-content: space-between也就无法产生“两端对齐”的效果——因为没有空间可以分配给元素之间的间距。

代码示例：

.container {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
}

3. 设置左右定位的容器场景

当同时给绝对定位元素设置left: 0和right: 0时，相当于强制指定了容器的横向起始和结束边界。浏览器会自动拉伸元素的宽度，使其填满这两个边界之间的所有可用空间（也就是父容器的整个横向宽度）。

此时flex容器拥有了足够的横向空间，justify-content: space-between就能正常工作，将两个子元素分别对齐到容器的左右两端。

代码示例：

.container {
    position: absolute;
    left: 0;
    right:0;
    top: 0;
    display: flex;
    justify-content: space-between;
}

总结 #

justify-content属性生效的关键前提是：flex容器本身存在未被子元素填满的多余空间。块级元素默认撑满父容器，天然满足这个条件；但绝对定位元素默认宽度由内容决定，没有多余空间，必须通过设置left/right（或直接指定width: 100%）强制拉伸宽度，才能让justify-content发挥预期作用。

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