如何让inline-flex布局下的多个div元素在同一行均匀分布？

我有3个类名为group-5的div元素，想要让它们在同一行均匀分布，但使用inline-flex布局后没达到预期效果。

HTML代码 #

<div class="group-4">
    <div class="group-5">
        <div class="text-wrapper-5">Hesapla</div>
        <div class="group-6">
            <div class="img-wrapper"><img class="img" src="img/case.svg"></div>
            <div class="text-wrapper-6">Some Context</div>
        </div>
        <p class="p">
            A tristique facilisi gravida at felis. Sed ornare arcu, tortor hendrerit etiam vulputate
            libero tellus. Etiam nu
        </p>
    </div>
    <!-- 另外两个group-5的div需嵌套在此处 -->
</div>

CSS代码 #

.group-4 {
    position: relative;
    display: inline-flex;
    height: 186px;
    justify-content: space-evenly;
}

.group-5 {
    position: relative;
    width: 316px;
    height: 186px;
}

.text-wrapper-5 {
    position: relative;
    top: 162px;
    left: 49px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ff611e;
    font-size: 16px;
    letter-spacing: 0.46px;
    line-height: 24px;
    white-space: nowrap;
}

.group-6 {
    position: relative;
    display: inline-flex;
    width: 314px;
    height: 40px;
    top: 0;
    left: 0;
}

解决方案 #

核心问题是group-4用了inline-flex——这个属性会让容器宽度收缩到内容宽度，无法撑满父容器，导致子元素没有足够空间均匀分布。

修改步骤：

1. 将group-4的display: inline-flex改为display: flex，让容器自动撑满父元素宽度
2. 若父容器本身没有设置宽度，可额外添加width: 100%确保容器铺满可用空间
3. 可选：添加gap: 16px（数值按需调整），给子元素设置最小间距，避免极端情况下挤在一起

修改后的group-4 CSS：

.group-4 {
    position: relative;
    display: flex;
    height: 186px;
    justify-content: space-evenly;
    width: 100%;
    gap: 16px;
}

同时要确认3个group-5元素都正确嵌套在group-4内部，结构完整才能生效。

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