如何制作一个可拉伸以适合包装物品的弹性盒容器？ [复制]

2024-02-20

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

在此代码笔中： http://codepen.io/justinmc/pen/ZYwWMz

灰色的 div 是 Flexbox 容器，红色的 div 包含在内部，并通过 Flexbox 排列在列中。灰色 div 需要扩展/收缩其宽度以完美包含红色子 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>

“解决方案”

我轻率地使用术语“解决方案”，因为这是insanely没有像托马斯建议的固定行就很难做到（即不将 HTML 更改为更传统的样式），或者一般来说没有一些高度的黑客攻击。此外，除非已完成 2 行并且包含的 div 的大小无法可靠地减小，否则高度会减半；注释掉 child 7 看看会发生什么。然后，当您也取消注释 8 时，会发现它恢复到“正常”。

我已经搞砸了一个小时左右，我能想到的最好的就是这个小提琴。 https://jsfiddle.net/7dk55801/3/

我想提供一些背景知识

默认flex-flow is row nowrap，这设置了一定的宽度x关于幸运地接受该规则的元素。看来在这种情况下改变flex-flow to column does not重置宽度x定义在该元素上。元素占用宽度x就好像它是flex-flow: row nowrap（自己尝试一下）。

由此产生了一大堆宽度继承问题，我们无法设置flex-basis属性（我相信它的行为并不像这样）所以我们需要将所有内容包装在另一个元素中.container我们可以定义宽度，并将实际的列样式放在.row元素代替。然而，.container也不会缩水。最多我们可以正确定义列的宽度.container(ing) 元素都做自己的事情。

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

我可以输入更多内容，但我认为这根本不是一个可行的解决方案，实际上只是一个“证明”，证明它无法很好地完成。

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

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

flexbox