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 但没有效果。

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

我做错了什么？

Answer 1

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

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

在这种情况下，因为只有一条伸缩线(占据容器的整个高度)，所以在容器上使用 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?