Html 使用flex对齐已使用flex的项目？

我正在尝试有一个容器，里面有许多子内容块。每个子磁贴都包含我希望居中的数据，这就是为什么flex位于子磁贴上的原因，以便我可以对齐磁贴内容。 我想将3均匀地对齐到一条直线上，所以我将flex放在父类上，并希望均匀地分配空间，但这似乎不起作用。你知道我做错了什么吗

<div class="container">
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>

</div>

---

你少了一些关键的东西。第一，您的父容器缺少类父容器，因此CSS从未达到其目标。开始标记现在是：

<div class="container parent">

将间距添加到。父项确保项目沿边到边，而不考虑项目之间的宽度和间距：

justify-content: space-between;

然后，我在.child元素中添加了一个宽度，它可以灵活地创建3跨布局。我使用calc作为在元素之间获得一些空间的快速方法，而不是它们水平接触：

width: calc(33.333% - 20px);

也在那里扔了一些小图片来查看更多的内部柔韧效果。希望这有帮助

.家长{ 显示器：flex； 最大宽度：1200px； 证明内容：之间的空间； 柔性包装：包装； } .孩子{ 显示器：flex； 边缘底部：26px； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； 宽度：calc33.333%-20px； 背景色：ccc； } 标题1 标题2 标题3 标题4 标题5 标题6 标题7

---

这可能会有帮助：请发布足够的代码来重现问题。

justify-content: space-between;

width: calc(33.333% - 20px);