html - Flexbox:第二行未与第一行对齐

Question

我在 flex 容器中有 4 件元素。我每行要 3 个。我希望容器居中——通过将容器与 justify-content 居中，第二行中的第 4 项也居中。所以我使用了::after 技巧来尝试更正它，但现在第二行与第一行不对齐。

在我看来，问题在于 flex 容器比内容项占用的宽度更大，这迫使我将其与导致此问题的 justify-content 居中。

使用网格会更容易吗？如果是这样怎么办？我想要一个简单的 iframe youtube 视频居中网格，每行 3 个，最后一行左对齐。

https://codepen.io/k4ir0s/pen/RdeejK

.section-vids ul {
  list-style: none;
  margin:0;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.section-vids ul li {
  padding: 20px;
}

.section-vids ul:after {
  content: "";
  flex: auto;
}

<div class="container" id="media">
      <section class="section-vids">
        <ul>
          <li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
                    <li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
                    <li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
                    <li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
        </ul>
    </section>
</div>

Answer 1

justify-content: center; 不会将容器居中，而是将其中的元素居中。如果您从 ul 的 CSS 中删除它，我所看到的正是我相信您所描述的内容。您也可以使用 justify-content: space-between; 或 justify-content: space-evenly; 来获得类似的结果。

如果你遇到水平溢出的问题(你不应该这样)，那么你可以在 ul 上设置 max-width: 100%; 和这应该得到解决。 ::after 伪元素的技巧是不需要的。