Javascript 删除y轴边距

我一直在尝试制作一个砖石结构的布局，所以我给了div一个随机的高度和颜色，但是div似乎有一个y轴的边距。我希望div有一个统一的边距，这样它们看起来更像一个砖石布局。这个代码哪里出了问题

import React from "react";
import "./styles.scss";
const colors = ["palevioletred", "red", "green", "blue", "yellow", "orange"];

const getRandomItem = items => {
  return items[getUniqueFromRange(0, items.length)];
};

const getUniqueFromRange = (min, max) => {
  return Math.floor(min + Math.random() * (max - min + 1));
};

export default class App extends React.Component {
  render() {
    return (
      <div class="wrapper">
        {Array.from({ length: 30 }).map((item, index) => (
          <div
            key={index}
            style={{
              background: getRandomItem(colors),
              height: getUniqueFromRange(100, 200)
            }}
          />
        ))}
      </div>
    );
  }
}

---

为了拥有您正在寻找的垂直flexbox砌体网格，您需要有一个

flex direction:column

在上面的沙盒中，我为包装容器使用了任意高度2000px，但解释了一个更优雅的解决方案，其中使用JavaScript计算容器的最佳高度，这将防止任何多余的空白显示在您的砖石网格中

* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
}

.wrapper > * {
  border: 5px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

---

试试这个，看看它是否是你想要的。

我认为你不能使用

行

的弹性方向，但你必须使用

列

的弹性方向：不幸的是，我认为你不能坚持默认的

行

弹性方向，因此，您需要在某处使用

flex-direction:column

。检查我在回答中提供的代码沙盒。亚历克斯·哈扎德似乎和我的方法相似。

* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
}

.wrapper > * {
  border: 5px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}