html - flex 元素忽略对齐内容属性

Question

我有以下内容:

main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  }

.content-container {
  padding: .5em;
  margin-bottom: 74px;
  flex-basis: min-content;
  }

<main>
<div class="content-container">
     <div>Exercitationem officiis, quod. Culpa deserunt et nisi perspiciatis quisquam tempora tempore voluptates?
      Assumenda commodi distinctio fugiat illo in ipsam maiores minus nam ratione rem, saepe soluta tempora, vero.
      Quisquam, voluptatum!
    </div>
    <div>Autem cumque debitis deleniti dicta doloremque ea est ex, harum magni natus omnis placeat provident recusandae
      saepe sapiente, ut voluptas voluptate, voluptatibus? Dolore dolores iure necessitatibus non obcaecati saepe sequi!
    </div>  
</div>
</main

无论屏幕大小如何，我都希望 .content-container 始终居中。但问题是 .content-container div 总是获得 100vh 的高度(不管没有定义高度)。我尝试设置 flex-basis 但没有效果。

如果我手动将 height 设置为例如 100px，内容就会重叠。

我做错了什么？

Answer 1

在单行 flex 容器(flex-wrap: nowrap)中，使用align-items 进行横轴对齐。

在多行 flex 容器(flex-wrap: wrap)中，使用align-content。

在这种情况下，因为只有一根flex线(占据了容器的全高)，所以在容器上使用align-items: center，或者align-self : 以元素为中心。

align-items 放在 flex 容器上。它为所有元素设置默认的 align-self。

align-self 用于单个 flex 元素。它会覆盖父级为该特定元素设置的 align-items。

这里有一个更完整的解释:

• How does flex-wrap work with align-self, align-items and align-content?