主页 / coding / 问题 / 77929714
Accepted
gman
Asked: 2024-02-03 04:32:23 +0800 CST

带有子网格的部分网格，如果适合则为垂直，如果不适合则为水平

  • 772

这不是一个 CSS 网格问题（尽管如果 CSS 网格能解决它那就太好了。但我不认为 CSS 网格会解决它）。

我的内容包含 1 到 N 个高数据矩形，后跟 5 个或更多短数据矩形。目前，如果屏幕宽度足够 5 宽，则显示如下

+--+ +--+ +--+
|  | |  | |  |
|  | |  | |  |
|  | |  | |  |
|  | |  | |  |
+--+ +--+ +--+

+--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  |
+--+ +--+ +--+ +--+ +--+

当屏幕变窄时，它会像这样塌陷

+--+ +--+
|  | |  |
|  | |  |
|  | |  |
|  | |  |
+--+ +--+

+--+
|  |
|  |
|  |
|  |
+--+

+--+ +--+
|  | |  |
+--+ +--+

+--+ +--+
|  | |  |
+--+ +--+

+--+
|  |
+--+

最终转到 1 列

我想更改它，当宽度足够 5 列时执行此操作

（目标）

+--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  |
|  | |  | |  | +--+ +--+
|  | |  | |  | 
|  | |  | |  | +--+ +--+
+--+ +--+ +--+ |  | |  |
               +--+ +--+

               +--+
               |  |
               +--+

如果是超宽的话也不错

+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  | |  | |  | |  |
|  | |  | |  | +--+ +--+ +--+ +--+ +--+
|  | |  | |  | 
|  | |  | |  | 
+--+ +--+ +--+

注意：没有像素大小，也没有已知的宽度。

这是我目前拥有的内容的存储库

#sections {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.tall {
  background-color: #ccf;
  margin: 3px;
  padding: 1em;
  display: inline-block;
}
#shorts {
  flex: 1 1 auto;
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 0;
}
.short {
  margin: 3px;
  padding: 1em;
  background-color: #fcc;
  display: inline-block;
}
<div id="content">
  <div id="sections">
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div id="shorts">
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
    </div>
  </div>
</div>

您需要调整窗口大小才能看到布局变化。

这并不能达到上面的目的。相反，如果屏幕不够宽，无法容纳 8 个部分，则会将所有最后 5 个短部分放在高部分下方。比这个小，它们就会像预期的那样崩溃。媒体查询不是解决方案，因为我不知道各部分的大小。另请注意：我希望小区域保持在一起。我不希望其中一些位于高处，一些位于下方（我认为可以通过将所有内容都设置为内联块来做到这一点）。

事实上，如果只有 4 个人的空间，那么我想要这个

+--+ +--+ +--+ +--+
|  | |  | |  | |  |
|  | |  | |  | +--+
|  | |  | |  | 
|  | |  | |  | +--+
+--+ +--+ +--+ |  |
               +--+

               +--+
               |  |
               +--+

               +--+
               |  |
               +--+

               +--+
               |  |
               +--+

值得重申的是，高段和矮段的数量未知，但 1-3 个高和 4-7 个矮是正常范围。我只是选择了3高5矮作为例子。

另外，在上面的示例中，高大约是矮的两倍，但在实际代码中，高是矮的 7 倍。因此，像上一个示例中那样堆叠它们比图表效果更好。

有没有办法实现让一组小元素在右侧折叠直到没有一个适合的目标（仅限CSS）？

html

1 个回答

  1. Best Answer

    看来这flex-basis: min-content;flex-grow: 1;已经足够满足你的要求了。min-content就是考虑一个短元素的宽度，你也可以尝试0稍微不同的效果。

    #sections {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.tall {
  background-color: #ccf;
  margin: 3px;
  padding: 1em;
}
#shorts {
  flex-basis: min-content;
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
.short {
  margin: 3px;
  padding: 1em;
  background-color: #fcc;
}
    <div id="content">
  <div id="sections">
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div id="shorts">
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
    </div>
  </div>
</div>

    • 1

相关问题