如何垂直对齐 Flex 项目？

垂直对齐 Flex 项目

Flexbox 提供了一种在容器内排列元素的便捷方法。但是，有时您可能会遇到项目并排呈现而不是按所需的垂直顺序呈现的问题。使用 display: flex 时可能会发生这种情况。

要防止 Flex 项目并排渲染，只需将以下样式添加到父元素：

flex-direction: column;

该指令指示 Flexbox 在列中显示其子项，而不是

示例：

在提供的代码片段中：

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

最初，“square”和“some text”元素将并排放置。要解决此问题，请添加以下 CSS：

.inner {
  flex-direction: column;
}

这将确保“正方形”位于“某些文本”元素上方，从而实现所需的垂直布局。

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