包装不同大小的div，没有垂直空格[重复]答案

【问题标题】：Wrapping different sized divs with no vertical whitespace [duplicate]包装不同大小的div，没有垂直空格[重复]
【发布时间】：2020-09-09 23:03:34
【问题描述】：

当我调整窗口大小时，我想要一排不同大小的 div 级联，但是当我尝试使用 Flexbox 时，由于 div 的大小不同，我得到了垂直空白。

有什么方法可以删除这个空格/指定 div 之间有多少？

这是我的stackblitz的链接

.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div {
    width: 300px;
}
.red {
    background: orangered;
  height: 40px;
}
.green {
    background: yellowgreen;
  height: 150px;
}
.blue {
    background: steelblue;
  height: 150px;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}

<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

【问题讨论】：

你不能（如果不改变盒子的大小就不行）。 Flexbox 不是为二维布局设计的。
有没有一种方法可以在不使用 flexbox 的情况下做到这一点？
我不知道完整的 css 是否可行，我使用isotope 来完成。这是一个 jQuery 插件。
@physicsboy 考虑研究 CSS 网格
在那种情况下，我认为你需要一个 js 砌体解决方案。

标签： javascript html css flexbox

【解决方案1】：

这里的问题是您将 300px 的宽度设置为内容的彩色子级

.content div {
    width: 300px;
}

由于.content div 没有宽度，它是其父级的大小，即屏幕宽度的 100%，.因此，它将在自己的宽度内显示尽可能多的 div。如果您将大小调整到 300 像素到 599 像素之间，您应该将所有 div 对齐。

我想你会想在这里使用一个媒体查询，它会将你的 .content div 设置为 flex-direction: column 一旦屏幕宽度低于你想要的尺寸。假设是 900 像素，所以一旦你的三个有色孩子不在同一条线上，它们就会垂直对齐。您还需要删除强制元素保持在同一行的flex-wrap: wrap。

看起来像这样：

@media screen and (max-width: 900px) {
  .content {
   flex-direction: column;
   flex-wrap: nowrap;
  }
}

【讨论】：

我无法完全理解您要说的内容，能否请您提供一个代码笔，以便我自己查看？只是为了重新迭代 - 当屏幕小到足以从单行折叠时，我希望红色和蓝色框之间没有垂直空白。
您可以在您的 codepen 上尝试，只需将 @media screen and (max-width: 900px) { .content { flex-direction: column; flex-wrap: nowrap; } } 添加到您的 css 中
啊，是的。这不符合我的要求。对不起。