Flex-flow:柱包装.如何设置容器的宽度等于内容？

Question

我有一个容器和几个内部div.

.container {
 display: inline-flex;
 flex-flow: column wrap;
 max-height: 500px;
}
.element {
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
}

现在我有3个弹性柱.

我的预期:容器的宽度等于列宽(660px)的总和.

我得到了:容器的宽度等于第一列的宽度.

笔:http: //codepen.io/korsun/pen/zGpQrZ

为什么？当我将flex-direction更改为row并将max-height更改为max-width时,一切都按预期进行.有没有办法让我的容器宽度等于内容宽度？

Answer 1

1. 您的“ .wrap ”容器设置为“ inline-block ”。您需要将“ .container ”的容器设置为“block”，然后定义一个包含整个块的容器。

2. 您的“ .container ”设置为“ inline-flex ”，当您将内联元素添加到图片中时，它会执行与“.wrap”相同的操作。将其设置回“ flex ”应该可以解决您的问题。

3. 容器内的元素通常应设置为“ flex: [number] ”和包含宽度。目前的“200”是有限制的，不幸的是没有反应。将 max-width 设置为 200 将为其提供所需的宽度以及您可以通过媒体查询控制的响应方面。

http://codepen.io/mmcshinsky/pen/bd927e31d2df2f9180a5b7fcf1df2740/

.wrap {
  display: block;
  max-width: 660px;
}
.container {
  display: flex;
  flex-flow: column wrap;
  max-height: 500px;
}

.element {
  max-width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
  flex: 1;
}