是否可以根据内容设置比例网格列？

Question

使用 Flexbox 或 CSS Grid，是否可以根据其中一列的内容来调整我的列的大小？

\n\n

这里\xe2\x80\x99s我想要的：

\n\n

我有 2 根柱子，一根主柱和一根侧柱。

\n\n

|------------------------container--------------------------|\n|                                                           |\n||----------------------------------------|----------------||\n||               main                     |      side      ||\n||----------------------------------------|----------------||\n|                                                           |\n|-----------------------------------------------------------|\n

\n\n

我希望side能够根据其内容自动调整大小，并且我希望main 的宽度至少是side 的两倍。它可以变大，但不能变小。

\n\n

随着容器的增加，主容器将以相同的速率增长，而侧面保持其自动宽度。

\n\n

|--------------------------container increases----------------------|\n|                                                                   |\n||------------------------------------------------|----------------||\n||                   main increases               |      side      ||\n||------------------------------------------------|----------------||\n|                                                                   |\n|-------------------------------------------------------------------|\n

\n\n

容器可以缩小到侧面的 3 倍，此时主容器的宽度将是侧面的两倍。我希望这是断点。

\n\n

|--------------------container----------------------|\n|                                                   |\n||--------------------------------|----------------||\n||               main             |      side      ||\n||--------------------------------|----------------||\n|                                                   |\n|---------------------------------------------------|\n

\n\n

如果容器进一步缩小，我希望将列堆叠起来，其中两列现在都是 100% 宽度：

\n\n

|--------------------container--------------------|\n|                                                 |\n||-----------------------------------------------||\n||               main                            ||\n||-----------------------------------------------||\n||-----------------------------------------------||\n||                           side                ||\n||-----------------------------------------------||\n|                                                 |\n|-------------------------------------------------|\n

\n\n

这里\xe2\x80\x99s我尝试过的\xe2\x80\x99：

\n\n

我尝试使用 Flexbox 和 Grid 执行此操作，但我无法\xe2\x80\x99t 让主列根据侧列确定其大小。

\n\n

.container-grid {\n  display: grid;\n  grid-template-columns: 1fr auto; /* works, but doesn\xe2\x80\x99t wrap when left column gets too small */\n  /* I also tried the repeat() syntax, but that only worked for similarly-sized columns */\n}\n

\n\n\n\n

.container-flex {\n  display: flex;\n  flex-wrap: wrap;\n}\n.main { flex: 2; } .side { flex: 1; } /* same problem, doesn\xe2\x80\x99t wrap */\n.main ( flex: 0 1 auto; } .side { flex: 0 0 auto; } /* wraps columns too early, any time main is smaller than intrinsic width */\n

\n\n

我尝试过的唯一可行的解​​决方案是了解侧栏的固定宽度（我必须在不知道其内容的情况下进行预测），然后使用其宽度 3 倍的媒体查询。当然，媒体查询仅适用于窗口宽度，而不适用于容器宽度，因此我必须使用容器的任何父元素来计算媒体查询。

\n\n

.container-grid {\n  display: grid;\n  grid-template-columns: 1fr 15em;\n}\n@media screen and (max-width: 45em) {\n  .container-grid {\n    grid-template-columns: 1fr;\n  }\n}\n

\n

Answer 1

这是一种使用 Flexbox 的解决方案，您在 上使用的flex-growmain值比 上大得多side。

有了这个，side包裹时将填充父级，而在宽屏幕上时，由于 上的值高得多main，所以Flex-Growth实际上side将为零。

与两倍大小的amin-width相结合，它会在变小之前换行，为此我们可以使用百分比，因为它基于父级的宽度。mainside

因此，在本例中，on 大小的两倍main将是父级大小的 2/3，即 66.666%。

小提琴演示

堆栈片段

.container-flex {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 10000;
  min-width: 66.666%;
  background: lightblue;
}

.side {
  flex: 1 0 auto;
  background: lightgreen;
}

span {
  display: inline-block;
  padding: 20px;
}

<div class="container-flex">

  <div class="main">
    <span>Fill remain, min. twice the "side"</span>
  </div>

  <div class="side">
    <span>Take content size</span>
  </div>

</div>