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-wrap: wrap）中，使用align-content。

在这种情况下，因为只有一条柔性线（占据容器的整个高度），所以在容器上使用align-items: center，或在项目上使用align-self: center。

align-items继续使用flex容器。它为所有项目设置默认align-self。

align-self继续使用各个弹性项目。它会覆盖该特定项目的父级设置的align-items。

以下是一个更完整的解释：

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

Answer 2

尝试添加：

.content-container {
    align-self: center;
    flex: 1;
}

Answer 3

使用align-items沿容器的横轴分配项目：

main {
      align-items: center;
}

flex项忽略align-content属性

3 个答案: