如何使弹性启动项目居中对齐？

Question

我知道为什么无法将弹性包装容器中的中心与弹性起始物料对齐。 如您所知，如果您尝试做任何事情，它将留出适当的空间。 我所知道的是，到目前为止，我可以使用CSS网格和媒体查询将这些项目对齐到中心。 但是，我正在寻找另一种方式，减少烦人的方式。

例如，结构如下。

<Container>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
</Container>

如果您有任何想法和技巧，请告诉我。 谢谢。

---

我认为我需要添加更多细节。 应该看起来像这样。

---- [] [] [] [] [] ---- 1row
---- [] []          ---- 2row
same spaces on right and left sides

Answer 1

通过使用flex，您可以使用较少的代码轻松使项目居中对齐。 align-items: center;将帮助您将元素居中放置在屏幕中间。

.wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>