去除y轴边距

Question

我一直在尝试制作瀑布流式的布局，所以我给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>
    );
  }
}

* { box-sizing: border-box; }

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

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

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

CodeSandbox

（代码沙盒）

- reactRookie

---

我认为你不能使用row的flex-direction，但是你必须使用column的flex-direction：https://w3bits.com/flexbox-masonry/ - Robert Cooper

不幸的是，我认为您将无法坚持使用 row 的默认 flex-direction，因此您需要在某个地方使用 flex-direction: column。请查看我在答案中提供的 CodeSandbox。Alex Haszard似乎有类似的方法。 - Robert Cooper

Answer 1

为了创建一个你需要的垂直的flexbox瀑布流网格，你需要使用flex-direction: column。 Codesandbox 在上面的sandbox中，我使用了一个2000像素的任意高度来包装容器，但是this article介绍了一种更优雅的解决方案，即使用JavaScript计算容器的最佳高度，这将防止任何多余的空白出现在你的瀑布流网格中。

- Robert Cooper

Answer 2

* {
  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;
}

尝试一下，看看它是否符合您的要求。

- Alex Haszard