如何防止 Flex 项目并排渲染而不是垂直堆叠？

防止 Flex 项目并排渲染

使用 Flexbox 时，我们经常遇到希望将项目居中的情况块，但每个项目占据自己的行。不幸的是，当我们希望将项目置于彼此下方时，Flexbox 有时会将它们移到一边。

考虑以下 HTML 结构，其中使用带有 justify-content: center 和 justify-content: center 的 Flexbox 将橙色方块和文本元素放置在容器内align-items: center:

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

以及关联的 CSS:

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

应用 Flexbox 后，橙色正方形不是位于文本上方，而是位于侧面。为了纠正这个问题，我们需要修改内部容器的 flex-direction 属性：

.inner {
  ...
  flex-direction: column;
}

设置 flex-direction: column 指示 Flexbox 垂直显示其子项，一个在另一个下面，而不是在一行中。此行为符合我们的要求，将橙色方块放置在文本上方。

以上是如何防止 Flex 项目并排渲染而不是垂直堆叠？的详细内容。更多信息请关注PHP中文网其他相关文章！