等高元素：Flexbox 与 Grid

这是系列文章的第二篇，探讨了过去 13 多年来我作为前端开发者一直在解决的问题，并提出了一些现代 CSS 解决方案。访问ModernCSS.dev查看整个系列文章及其他资源。

大约七年前，我写过一个 jQuery 插件来计算等高列。它确保在一行包含三列的特殊情况下，无论内容的长度是多少，内容框的高度都保持相等。当时主流的布局方法——浮动——无法解决这个问题。

Flexbox 解决方案

当 flexbox 出现后，这成为可能：

.flexbox {
  display: flex;
}

太棒了！默认情况下，direct 子元素会排成一排，并且会应用“拉伸”操作，这样它们的高度就相等了 🙌

但是当你添加两个.columndiv 作为子元素时...列的内容又会出现不一致的情况😔

解决方法是：

.flexbox {
  display: flex;

  // Ensure content elements fill up the .column
  .element {
    height: 100%;
  }
}

现在，各列的高度将相等，并且会随着内容的增长而增长.element。

电网解决方案

对于网格，我们遇到了类似的行为：

.grid {
  display: grid;
  // Essentially switch the default axis
  grid-auto-flow: column;
}

与 flexbox 类似，直接子元素的高度相同，但它们的子元素需要添加高度定义，就像在 flexbox 解决方案中一样：

.grid {
  display: grid;
  grid-auto-flow: column;

  // Ensure content elements fill up the .column
  .element {
    height: 100%;
  }
}

这是两种解决方案的演示，以及定义每行一定数量的列的附加演示，如下所述：

哪一个更好？

如果纯粹是为了解决元素等高问题，弹性盒子的优势在于默认轴可以立即启用并排列，而网格则需要显式设置。然而，元素本身并非等宽（根据内容类型，例如导航链接，这可能是一个优势）。

网格的优势在于，如果需要的话，它本身就支持等宽元素。另一个优势是，当你不想要自动排布，而是想要定义每“行”的最大列数时。在这种情况下，网格布局可以轻松处理列的分配计算，而弹性盒解决方案则需要定义计算公式来限制列数。

更新我们的.grid解决方案以处理定义.column每行的最大数量 3，非常简单：

&.col-3 {
  grid-gap: $col_gap;
  grid-template-columns: repeat(3, 1fr);
}

而 flexbox 的一个（非常基本的）选项是：

$col_gap: 1rem;

.flexbox.col-3 {
  // Explicitly needs to be defined to wrap 
  // overflow items to the next virtual row
  flex-wrap: wrap;

  .column {
    // "hack" for no gap property
    margin: $col_gap/2;
    // define calculation for browser to use on the width
    max-width: calc((100% / 3) - #{$col_gap});
  }
}

您还需要考虑如何响应地处理这些解决方案，但这有点超出了本文的范围:)

鏂囩珷鏉ユ簮锛�https://dev.to/5t3ph/equal-height-elements-flexbox-vs-grid-2jk2