如何阻止 Flex 项目并排显示？

防止 Flex 项目并排渲染

问题：

当使用 Flexbox 将元素置于块中时，经常会遇到这样的问题：项目并排出现，而不是垂直位于彼此下方。在某些情况下，这可能是不可取的。

解决方案：

要防止 Flex 项目并排渲染，请实现以下 CSS 样式：

.inner {
  flex-direction: column;
}

说明：

此样式属性指定弹性项目在容器元素内排列的方向。通过将 flex-direction 设置为 column，您可以指示 Flexbox 在行而不是列中显示其子项。这将根据需要将项目垂直排列在彼此下方。

更新的示例：

以下更新的代码片段演示了此解决方案的工作原理：

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

.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;
  flex-direction: column;
}

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

通过利用 flex-direction: column，橙色方块和文本现在可以在容器元素内正确垂直堆叠，如下所示有意为之。

以上是如何阻止 Flex 项目并排显示？的详细内容。更多信息请关注PHP中文网其他相关文章！