Flexbox:第2行未与第1行对齐

Question

我在flex容器中有4个项目。我要每排3个。我希望容器居中--通过使容器居中对齐-内容在第二排的第四项也居中。所以我使用了一个::after技巧来纠正它，但是现在第二行没有和第一行对齐。

在我看来，问题是flex容器的宽度比内容项更大，这迫使我将其居中对齐--这就是导致这个问题的原因。

使用grid会不会更容易？如果是这样的话，是怎么做的？我想要一个简单的中心网格的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伪元素的技巧是不必要的。