如何垂直对齐 Flex 项目而不是水平对齐？

保持 Flex 项目垂直对齐

使用 Flexbox 居中元素时，当项目水平而不是垂直堆叠时，有时会令人沮丧。当弹性项目具有自然的内联流（例如文本或图像）时，就会出现此问题。

问题：

考虑以下代码片段：

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

目的是将橙色方块和 .inner 容器内的文本居中。但是，输出将并排显示正方形和文本，文本被中途截断。

解决方案：

要纠正此行为，我们需要改变内部容器的弯曲方向。默认情况下，flexbox 水平显示其子项。为了使它们垂直堆叠，我们将 flex-direction 属性设置为 column。

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

此更新的代码片段将强制 Flex 项目垂直对齐，解决并排堆叠问题。

更新的输出：

橙色方块现在将按照最初的预期出现在文本上方。当您想要确保某些元素在 Flex 容器内以特定方式保持对齐时，这是一种有用的技术。

以上是如何垂直对齐 Flex 项目而不是水平对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！