Question

我在flex容器中有4个物品。我要每行3个。我希望容器居中-通过将容器的居中内容居中，将第二行中的第四项也居中。因此，我使用:: 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>

Answer 1

reverse update YTD:sums Number by tool,date.year from reverse t date tool Number YTD ------------------------ 2019.03 Bolts 100 160 2019.03 Nuts 50 160 2019.02 Bolts 10 60 2019.02 Nuts 100 110 2019.01 Bolts 50 50 2019.01 Nuts 10 10 2018.12 Bolts 10 30 2018.12 Nuts 10 40 2018.11 Bolts 20 20 2018.11 Nuts 30 30不会使容器居中，而是使其中的项目居中。如果您从CSS中删除justify-content: center;的内容，那么我所看到的正是我所相信的内容。您也可以使用ul或justify-content: space-between;获得相似的结果。

如果遇到水平溢出的问题（不应该这样），则可以在justify-content: space-evenly;上设置max-width: 100%;，应该可以解决。不需要使用ul伪元素的技巧。

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

1 个答案: