防止 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中文网其他相关文章！
