删除 y 轴边距答案

【问题标题】：removing the y-axis margins删除 y 轴边距
【发布时间】：2020-07-23 05:13:01
【问题描述】：

我一直在尝试制作砖石类型布局，因此我为 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

【问题讨论】：

我认为你不能使用 row 的弹性方向，但你必须使用 column 的弹性方向：w3bits.com/flexbox-masonry
不幸的是，我认为你不能坚持使用默认的弹性方向row，所以你需要在某个地方使用flex-direction: column。查看我在答案中提供的代码框。 Alex Haszard 似乎有和我类似的方法。

标签： javascript html css reactjs

【解决方案1】：

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

试试这个，看看它是不是你要找的。p>

【讨论】：

【解决方案2】：

为了获得您正在寻找的垂直 flexbox 砌体网格，您需要有一个flex-direction: column。

Codesandbox

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

【讨论】：