Text 👋
      

        
          

            Email address
            
            We'll never share your email with anyone else.
          
          Submit
        
      
    
    

  

解决方案：调整Flex方向为列

要解决元素并排显示的问题，使其垂直堆叠，我们需要改变Flex容器的主轴方向。Flexbox允许通过flex-direction属性来控制主轴的方向。当主轴方向设置为column（列）时，Flex项目将从上到下垂直排列。

Bootstrap提供了相应的工具类来实现这一目的：

• flex-column: 将Flex容器的主轴方向设置为垂直（flex-direction: column）。
• flex-row: 显式地将Flex容器的主轴方向设置为水平（flex-direction: row），这是默认行为。

当主轴方向改变时，Flexbox的对齐属性行为也会随之改变：

• justify-content：控制Flex项目沿主轴的对齐方式。
  • 当flex-direction: row时，justify-content控制水平对齐。
  • 当flex-direction: column时，justify-content控制垂直对齐。
• align-items：控制Flex项目沿交叉轴的对齐方式。
  • 当flex-direction: row时，align-items控制垂直对齐。
  • 当flex-direction: column时，align-items控制水平对齐。

因此，为了实现垂直堆叠并保持水平居中，我们需要对Flex容器进行以下修改：

Vondy

下一代AI应用平台，汇集了一流的工具/应用程序

下载

1. 添加flex-column类，将主轴方向设置为垂直。
2. 添加align-items-center类，以确保Flex项目沿交叉轴（此时为水平方向）居中对齐。

实现步骤与代码示例

根据上述分析，我们需要修改包含

和

修改前：

修改后： 在父div中添加flex-column和align-items-center类。

  

    

    

      
Text 👋
      

        
          

            Email address
            
            We'll never share your email with anyone else.
          
          Submit
        
      
    
    

  

注意事项与最佳实践

1. 响应式设计： Bootstrap的Flexbox工具类也支持响应式前缀，例如flex-md-column、flex-lg-row。这意味着你可以根据屏幕尺寸动态调整Flex方向，以适应不同的设备布局需求。例如，在小屏幕上垂直堆叠，在大屏幕上水平排列。
2. 理解主轴与交叉轴： 深入理解Flexbox的主轴（main-axis）和交叉轴（cross-axis）概念是掌握Flexbox布局的关键。flex-direction决定主轴方向，而justify-content和align-items则分别作用于主轴和交叉轴。
3. 嵌套Flex容器： 在复杂的布局中，你可能会遇到Flex容器内嵌套Flex容器的情况。每个Flex容器都独立管理其直接子元素的布局，因此需要分别对其应用Flexbox工具类。
4. 内容宽度： 如果Flex项目是块级元素（如本例中的div），它们默认会占据其父容器的全部可用宽度。即使应用了align-items-center，如果子元素本身宽度已满，视觉上可能不会有居中效果。在这种情况下，可以考虑为子元素设置最大宽度或使用mx-auto等边距工具类来限制其宽度并实现居中。

总结

当使用Bootstrap的Flexbox布局时，若期望元素垂直堆叠而非默认的水平并排，核心解决方案在于调整Flex容器的flex-direction属性为column，即应用flex-column工具类。同时，为了在垂直堆叠后实现水平居中，应结合使用align-items-center。掌握这些Flexbox基础知识和Bootstrap工具类的用法，将有助于更高效、准确地构建灵活且响应式的网页布局。