如何使flexbox容器伸展以适应包装的项目？ [英] How can I make a flexbox container that stretches to fit wrapped items?

问题描述

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

---

我想提供一些背景

默认 flex-flow 是 row nowrap ，它在元素上设置了一定宽度 x ，足以接收该规则。看起来在这种情况下，将 flex-flow 更改为列 不会重置width x 。元素的宽度 x 就好像 flex-flow：row nowrap / p>

有一大堆宽度继承问题源于这个，我们不能设置 flex-basis 属性我不需要像我这样的行为），所以我们需要包装在另一个元素 .container ，我们可以定义width，并将实际列样式放在 .row 元素。但是， .container 也不会收缩。最好的情况下，我们的列的宽度用 .container （ing）元素来定义。

因此，我们需要一个伪元素 :: after 以提供具有正确宽度的背景，包括一些 margin calc（） hacks模拟填充。

我可以输入更多，但我不认为这是一个可行的解决方案，真的只是一个证明如何不能很好地做。

如果你想添加更多的行，你必须改变宽度从2（1/2）的50％到3（1/3）的33％...它不像编辑HTML本身一样可扩展。

总而言之，有一个工作演示只有2行，但现在这似乎不合理的当前HTML标记结构。

I would like a flex-direction: column; flexbox container whose width grows to fit the containing elements.

In this codepen:

The grey div is the flexbox container, and the red divs are contained inside and layed out in columns with flexbox. The grey div needs to expand/contract its width to perfectly contain the red children divs. Is this possible?

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

解决方案

"Solution"

I use the term solution lightly as this is insanely difficult to do without fixed rows like Tomas suggested (i.e. without altering the HTML to a more conventional style), or generally without some high degree of hacking. Furthermore, the height halves unless there are 2 rows completed and the containing div cannot be reduced in size reliably; comment out child 7 and see what happens. Then when you also uncomment 8 see that it goes back to 'normal'.

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

---

I'd like to offer a little background

The default flex-flow is row nowrap, this sets a certain width x on the element lucky enough to receive that rule. It appears that in this case changing the flex-flow to column does not reset the width x defined on that element. The element takes the width x as if it were flex-flow: row nowrap (try this for yourself).

There's a whole heap of width inheritance issues that stem from this, we cannot set the flex-basis property (it's not meant to behave like this I believe) so we need to wrap everything in another element .container which we can define width on, and put the actual column styles on a .row element instead. However, .container will not shrink either. At best we have our column properly defined in width with the .container(ing) element for both doing it's own thing.

Thus we require a pseudo element ::after to provide the background with correct width, including some margin and calc() hacks to simulate padding.

I could type a lot more but I don't think this is a viable solution at all, really just a 'proof' of how it cannot be done nicely.

If you wanted to add more rows you'd have to change the width from 50% for 2 (1/2), to 33% for 3 (1/3) etc... it's not really as scaleable as editing the HTML itself.

So to conclude, there's a working demo for 2 rows only but for now this doesn't seem plausible with that current HTML markup structure.

这篇关于如何使flexbox容器伸展以适应包装的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！