如何在 Flexbox 列中水平对齐垂直内容？

使用 Flexbox 平衡不同父母的孩子身高

问题：

在两列布局，每列包含不同长度的内容，我们如何确保两列中的列表保持水平对齐而不破坏 Bootstrap 的移动优化？理想情况下，解决方案应利用 Flexbox 并避免使用 JavaScript。

答案：

要在不使用 JavaScript 的情况下实现此目的，我们需要制作所有内容项（标题、段落和

当屏幕宽度允许并排显示列时，这些项目将需要重新排序以保持正确的对齐方式：

• 媒体查询：

  <code class="css">@media (min-width: 768px) {
    // Flexbox rules
  }</code>

  登录后复制

• Flexbox 配置：

  <code class="css">.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .content > * {
    flex-basis: calc(50% - 30px); // Adjust for gutters
  }</code>

  登录后复制

• 元素排序：

  <code class="css">.content h2 { 
    order: 0; // Heading (row 1)
  }
  
  .content p { 
    order: 1; // Paragraphs (row 2)
  }
  
  .content p + p { 
    order: 2; // Second paragraph (row 3)
  }
  
  .content ul { 
    order: 3; // List (row 4)
  }</code>

  登录后复制

注意事项：

• 边框：添加边框，在元素上使用边框属性的组合，并使用媒体查询调整它们以适应不同的堆叠配置。

更新的代码：

请参阅更新的 Codepen 以获取工作示例：

[Codepen 链接]

以上是如何在 Flexbox 列中水平对齐垂直内容？的详细内容。更多信息请关注PHP中文网其他相关文章！