css flex布局高度如何不一致

要实现不一致的高度，你可以使用 CSS 的 Flexbox 布局，并结合一些其他的属性。下面是一种常见的实现方式：

HTML 结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 添加更多 item -->
</div>

CSS 样式：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 25%; /* 设置每个 item 的宽度为容器的四分之一 */
  margin-bottom: 10px; /* 设置 item 之间的间距 */
}

.item:nth-child(odd) {
  height: 200px; /* 设置奇数项的高度 */
}

.item:nth-child(even) {
  height: 150px; /* 设置偶数项的高度 */
}

在上面的示例中，我们使用了 `nth-child` 选择器来分别设置奇数项和偶数项的高度。你可以根据实际需求来设置不同的高度值。

这样设置后，每个 item 的宽度将相等，但高度将根据奇偶项的不同而有所区别，从而实现不一致的高度效果。同时，通过设置 `margin-bottom` 属性，可以控制 item 之间的间距。

希望这个示例能帮助到你实现所需的效果！