如何制作可拉伸以适应包裹物品的 flexbox 容器？

Question

我想要一个 flex-direction: column; flexbox 容器，其宽度会增长以适合包含的元素。

灰色的div是flexbox容器，红色的div装在里面，用flexbox按列排列。灰色 div 需要 expand/contract 宽度才能完美包含红色子项 div。这可能吗？

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 290px;
  align-content: flex-start;
  padding: 2px;
  background: grey;
}
.child {
  background: red;
  width: 100px;
  height: 100px;
  margin: 2px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

您没有设置父元素的宽度行为。将 .container display 属性设置为 inline-block 并为每个 .row 元素添加 display: flex 属性。

.container {
  display: inline-block;
  max-height: 290px;
  padding: 2px;
  background: grey;
}
.row{
  display:flex;
}
.child {
  background: red;
  width: 100px;
  height: 100px;
  margin: 2px;
}

<div class="container">
  <div class="row">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="row">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

"Solution"

我很少使用术语解决方案，因为如果没有像 Tomas 建议的固定行 （即不将 HTML 更改为一种更传统的风格），或者通常没有一些高度的黑客攻击。此外，高度减半，除非有 2 行完成并且包含 div 的大小不能可靠地减小；注释掉 child 7，看看会发生什么。然后，当您还取消注释 8 时，会看到它返回到 'normal'.

I have been messing around for an hour or so and the best I can come up with is in this fiddle.

我想提供一些背景知识

默认的 flex-flow 是 row nowrap，这会在足够幸运地接受该规则的元素上设置一定的宽度 x。在这种情况下，将 flex-flow 更改为 column 似乎不会 重置该元素上定义的宽度 x。该元素的宽度为 x，就好像它是 flex-flow: row nowrap（自己试试）。

由此产生了一大堆宽度继承问题，我们无法设置 flex-basis 属性（我相信它不应该像这样）所以我们需要将所有内容包装在另一个我们可以定义宽度的元素 .container，并将实际的列样式放在 .row 元素上。但是，.container 也不会收缩。充其量，我们使用 .container(ing) 元素正确定义了列的宽度，以便两者都做自己的事情。

因此我们需要一个伪元素 ::after 来为背景提供正确的宽度，包括一些 margin 和 calc() 技巧来模拟填充。

我可以输入更多内容，但我认为这根本不是一个可行的解决方案，实际上只是 'proof' 如何不能很好地完成它。

如果您想添加更多行，则必须将宽度从 2 (1/2) 的 50% 更改为 3 (1/3) 的 33% 等...它并不是真正可扩展的编辑 HTML 本身。

总而言之，有一个仅适用于 2 行的工作演示，但目前这对于当前的 HTML 标记结构来说似乎不太合理。

如何制作可拉伸以适应包裹物品的 flexbox 容器？

How can I make a flexbox container that stretches to fit wrapped items?

css

flexbox

"Solution"

我想提供一些背景知识