如果你想使用flex，那么你可以通过在flex容器的子元素中添加flex-basis: 100%来使所有三个div共享相同的宽度。我简化了你的HTML来更好地展示如何做到这一点。100%只是表示它们都被平等对待。它不像100%的宽度。
然后，如果要将.footer-explore右对齐，则需要在.footer-explore内添加一个额外的div。
请注意，我添加了轮廓，使对齐更加清晰。

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: top;
}

.nav {
  padding: 0 20px 0 20px;
  flex-basis: 100%;
}

* {
  outline: 1px solid grey;
}

<div class="footer-nav">
  <div class="footer-explore nav">
    <h20>Left</h20>
  </div>

  <div class="footer-company nav">
    <h20>Center</h20>
  </div>
  
  <div class="footer-socials nav">
    <h20>RightRightRightRight RightRightRightRight</h20>
  </div>
</div>

你也可以使用一个网格，设置中间的列来适应它的内容，设置边上的两个div来填充剩余的空间（使用1fr）。同样，如果你想让它右对齐，你需要在.footer-explore里面添加一个额外的div。为了清晰起见，我在这里也添加了一个outline。
一个二个一个一个

已经有很多答案了，但我想我会给予我的2美分，因为没有一个答案实际上显示了一个例子，其中最左边和最右边的列没有扩展到全宽。
在grid布局中，可以使用以下命令定义3列：

grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);

第一列和最后一列（左列和右列）将根据内容宽度进行拉伸，而布局保持为3列布局，中间一列的值为auto。
然后，您可以使用justify-self指定每个grid-项的位置，这在flex-和grid-布局中都有效-我在示例中使用了flex。
这个解决方案不是完全响应的，但是你可以在grid-items上指定一个max-width值，这将使它对大多数屏幕都有响应，而不是像移动的设备这样的小屏幕。
x一个一个一个一个x一个一个二个x

#grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100vw;
  height: 100vh;
}

#div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: rgba(29, 240, 35, 0.5);
}

#div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: rgba(213, 209, 50, 0.5);
}

#div3 {
  grid-area: 1 / 3 / 2 / 4;
  background-color: rgba(158, 43, 127, 0.5);
}

<div id="grid">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
</div>

我不知道这是否与你所寻找的完全一致，但css网格可能是你的答案

柔性盒解决方案如下所示：
左div和右div允许使用flex-grow进行增长：1;中心的flex-grow为0，所以它会缩小。如果我们将左右div的flex-basis设置为100%，那么它们会扩展到相同的大小。我在屏幕的中心位置画了一条红线，这样你就可以看到中心div实际上是居中的。

.container-footer-3 {
  display: flex;
  gap: 0.5rem;
}

.container-footer-3 > div {
  flex-grow:1;
  outline:1px solid blue;
  flex-basis:100%;
}

.container-footer-3 > div:first-child {
  text-align:right;
}

.container-footer-3 > div:nth-child(2) {
  flex-grow:0;
  flex-basis:0;
}

.centerline {
  border:1px solid red;
  height:50px;
  width:0px;
  position:absolute;
  left:50%;
  top:0;
}

<div class="footer-nav">
  <div class="container-footer-3">
    <div class="footer-explore nav">
      <h20>Left</h20>
    </div>

    <div class="footer-company nav">
      <h20>Center</h20>
    </div>
    <div class="footer-socials nav">
      <h20>RightRightRightRight</h20>
    </div>
  </div>
</div>
<div class='centerline'></div>