Css 有没有可能在他们可以去的地方做一个弹性潜水器？

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

---

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

并使用

栅格模板区域

属性定义整个栅格结构

HTML

---

这里是flexbox:

.main容器{
显示器：flex；
宽度：100%；
高度：100px；
背景色：#ddd；
}
.主容器>*{
弹性：1；
}
.左货柜{
显示器：flex；
弯曲方向：立柱；
}
.左容器>*{
弹性：1；
边框：1px纯红；
}

A.
B
C

您必须使用flexbox吗？这对我来说更像是一个网格布局。谢谢你的兴趣，出于某种原因，我不得不使用flexbox，但使用网格可能吗？使用网格肯定是可能的，我不知道使用flexbox是否可能。我希望第三个div可以在第三个div的宽度超过50%时，使用下图所示的新行，也可以吗？谢谢你的回复。当第三个div的宽度超过50%时，有没有办法让它像第二张图片上那样换一条新的线？网格只会保持这种形式，不管它有多灵敏。我无法更好地理解您，因为第二个分区相对于其他分区将具有固定的宽度，所以网格结构将保持不变。解决问题的不同方法需要更多信息或代码。所有div（如1、2和3等）都有自己的宽度（如30%、50%或60%等）。如果行中有空格，则它们位于前一个元素的旁边。例如，如果第一个元素具有30%的宽度，第二个元素具有50%的宽度，则它们将放置在同一行上，而第二个div具有80%的宽度，则它将放置在新行上。问题是，所有的div都有不同的高度，所以一个新行中的元素可以在有空间的情况下无间隙地放置。因此，如果第三个div的宽度为60%，那么它将位于一条新的直线上，当宽度为30%时，它将位于div1的正下方。希望这是有道理的。谢谢你的回复。我想让第三个div进入一个新行，如下图所示，当第三个div的宽度自动超过50%时，是否也可以？a、b、c div应该是主容器的子容器。我们不应该让a和b的div左对齐。谢谢在这种情况下，我不知道如何处理flexbox。谢谢你的关注

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

.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; }