是否可以让 flex div 坐在有空间的地方？答案

【问题标题】：Is it possible to make a flex div to sit where there is a space they can go?是否可以让 flex div 坐在有空间的地方？
【发布时间】：2021-08-24 10:39:57
【问题描述】：

抱歉我的问题不太清楚，但我真正想做的就是这样。我想像第一张图片一样对齐 div，而不是像第二张图片一样。父 div 将具有 flex 样式。如果有任何解决方案，很高兴知道它。提前致谢。

【问题讨论】：

你必须使用flexbox吗？这对我来说更像是一个网格布局。
感谢您的关注，由于某种原因我必须使用 flexbox，但是使用网格可以吗？
用grid肯定可以，恐怕用flexbox不知道是否可以。
当第三个div的宽度超过50%时，我希望第三个div像下图那样换行，也可以吗？

标签： css flexbox

【解决方案1】：

您可以在 flex 中插入另一个网格容器。（检查 this question 以获取 flex 容器内的网格。）

并使用grid-template-area属性定义整体网格结构。

HTML

<div class="grid-container">
  <div class="D1"></div>
  <div class="D2"></div>
  <div class="D3"></div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "D1 D3"
    "D2 D3";
}

.D1 { grid-area: D1; }

.D2 { grid-area: D2; }

.D3 { grid-area: D3; }

【讨论】：

感谢您的回复。当第三个 div 的宽度超过 50% 时，有什么办法可以像第二张图片那样换行？
网格将保持这种形式，但响应速度快。我无法更好地理解您，因为第二个 div 相对于其他 div 将具有固定的宽度，因此将保持网格结构。解决问题的不同方法需要更多信息或代码。
好吧，所有的 div（如 1、2 和 3 等）都有自己的宽度（如 30%、50% 或 60% 等）。如果行中有空格，则它们位于前一个元素旁边。例如。如果第一个元素的宽度为 30%，第二个元素的宽度为 50%，那么它们将位于同一行，但第二个 div 的宽度为 80%，那么它将位于新行上。问题是，所有 div 都有不同的高度，所以如果有空间，新行上的元素可以毫无间隙地放置。因此，如果宽度为 60%，则第三个 div 将位于新行上，当宽度为 30% 时，它将位于 div 1 下方。希望这是有道理的。谢谢

【解决方案2】：

这里是 flexbox：

.main-container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #ddd;
}

.main-container > * {
  flex: 1;
}

.left-container {
  display: flex;
  flex-direction: column;
}

.left-container > * {
  flex: 1;
  border: 1px solid red;
}

<div class="main-container">
  <div class="left-container">
    <div>a</div>
    <div>b</div>
  </div>
  <div>c</div>
</div>

【讨论】：

感谢您的回复。当第三个 div 的宽度自动超过 50% 时，我希望第三个 div 像下图一样换行，这也可能吗？
a,b,c div 应该是主容器的子元素。我们不应该为 a 和 b 设置左对齐的 div。谢谢
在那种情况下，我不知道如何处理 flexbox。
感谢您的关注