Flexbox布局中的默认行为与常见误区
现代网页布局中，Flexbox（弹性盒子）模型因其强大的对齐和分布能力而广受欢迎。Bootstrap框架也大量依赖Flexbox来实现其网格系统和组件布局。然而，Flexbox的一个默认行为常常让初学者感到困惑：当一个容器被设置为display: flex时，其直接子元素（即Flex项目）会默认沿主轴（flex-direction: row）并排排列。
在Bootstrap中，诸如d-flex、row或col等类都会隐式地将元素设置为Flex容器。例如，col类本身就包含display: flex的样式，而d-flex则显式地将元素转换为Flex容器。当这些Flex容器的子元素预期垂直堆叠时，却发现它们并排显示，这通常是由于未显式设置或覆盖flex-direction属性导致的。
核心解决方案：调整Flex方向为垂直堆叠
要解决元素并排显示的问题，核心在于改变Flex容器的主轴方向。Flexbox提供了flex-direction属性来控制Flex项目在容器中的排列方向。当设置为column时，Flex项目将沿垂直方向（从上到下）堆叠。
在Bootstrap中，实现这一目标的最便捷方式是使用其提供的flex-column工具类。将此flex-column类添加到Flex容器上，即可将其主轴方向从默认的水平（row）更改为垂直（column），从而使子元素垂直堆叠。
实战案例分析与代码演示
考虑以下一个常见的布局场景：在一个Bootstrap列内，我们希望一个
