在 CSS3 中，flexbox 和 grid 都是非常强大的布局工具，能够帮助我们轻松实现等高元素的布局。下面我将分别通过这两种方法提供等高元素布局的示例代码。

1. 使用 Flexbox 实现等高元素布局

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 等高元素布局</title>
  <style>
    /* 页面背景和布局 */
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f4f4f4;
    }

    .flex-container {
      display: flex; /* 启用弹性布局 */
      justify-content: space-between; /* 水平分布元素 */
      width: 80%;
      height: 60%; /* 给容器一个高度 */
    }

    .flex-item {
      flex: 1; /* 每个项目均分容器的宽度 */
      background-color: #007bff;
      color: white;
      padding: 20px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .flex-item:nth-child(odd) {
      background-color: #ff6ec7; /* 设置奇数项的背景色 */
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">项 1</div>
    <div class="flex-item">项 2</div>
    <div class="flex-item">项 3</div>
  </div>
</body>
</html>

解释：

  1. display: flex：使父容器 .flex-container 使用弹性布局。
  2. flex: 1：为子元素设置 flex: 1，表示每个元素将平均分配容器的宽度，保证所有元素宽度相等。
  3. align-items: stretch：这是 flexbox 的默认值，它会使子元素在交叉轴（垂直方向）上拉伸以填满容器高度，从而保证每个子元素具有相同的高度。

2. 使用 Grid 实现等高元素布局

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 等高元素布局</title>
  <style>
    /* 页面背景和布局 */
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f4f4f4;
    }

    .grid-container {
      display: grid; /* 启用网格布局 */
      grid-template-columns: repeat(3, 1fr); /* 三列，宽度相等 */
      gap: 10px; /* 元素间隙 */
      width: 80%;
      height: 60%; /* 给容器设置高度 */
    }

    .grid-item {
      background-color: #007bff;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .grid-item:nth-child(odd) {
      background-color: #ff6ec7; /* 设置奇数项的背景色 */
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">项 1</div>
    <div class="grid-item">项 2</div>
    <div class="grid-item">项 3</div>
  </div>
</body>
</html>

解释：

  1. display: grid：将父容器 .grid-container 设置为网格布局。
  2. grid-template-columns: repeat(3, 1fr)：这将创建三列，每列的宽度为容器的三分之一。1fr 是“可分配的空间单位”，即平分剩余空间。
  3. gap: 10px：设置网格项之间的间隔。
  4. align-items: stretch（默认行为）：Grid 布局的默认行为就是让所有网格项的高度拉伸以填充容器的高度，确保每个元素的高度相等。

总结：

  • Flexbox：使用 flex: 1 来确保子元素分配均等的空间，并利用 align-items: stretch 让元素垂直拉伸以填满容器的高度。这是一种非常简洁和直观的方法来实现等高布局，适用于一维布局（水平或垂直）。
  • Grid：通过 grid-template-columns 设置固定的列数，并使用默认的 align-items: stretch 来使元素的高度一致。Grid 布局适用于二维布局，并且在布局上提供更多的控制力。

两者的选择取决于具体的布局需求。如果你的布局较为复杂，或者需要在行和列上进行更细致的控制，使用 Grid 可能会更有优势。如果只是简单的一行或一列的布局，使用 Flexbox 更为便捷。