Flexbox：第二行未与第一行对齐答案

【问题标题】：Flexbox: 2nd row not aligned to 1st rowFlexbox：第二行未与第一行对齐
【发布时间】：2019-08-11 20:52:34
【问题描述】：

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

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

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

.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>

【问题讨论】：

每个弹性项目都有一个宽度为 560 像素的 iframe - 这使得它在较小的屏幕宽度中不可能连续 3 个...

标签： html css flexbox

【解决方案1】：

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

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

【讨论】：