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

防止 Flex 项目并排显示

Flexbox 提供了一种在块内对齐项目的有效方法。但是，如果您遇到希望项目垂直而不是水平显示的情况，默认的弹性行为可能会成为障碍。

问题陈述：

尽管使用 Flexbox 将项目集中在块中，项目继续并排显示。期望的结果是每个项目占据自己的行。例如，橙色方块应该位于文本上方，但 Flex 将其重新定位到文本旁边。

解决方案：

解决此问题的关键在于添加以下样式：

.inner {
  flex-direction: column;
}

通过指定“column”作为 Flex 方向，我们指示 Flexbox垂直显示其子项。这解决了问题并按预期定位项目。

更新的代码片段：

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

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

<style>
  .container {
    ...
  }

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

  .square {
    ...
  }
</style>

将“flex-direction”属性设置为“column”， Flexbox 元素现在将按行显示，解决了原来并排定位的问题。

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