弹性盒容器宽度不会增加[重复]

Question

当在默认行方向使用弹性盒子时，容器高度会增长到包含所有弹性项目，即使它是绝对定位的。

#container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  height: 200px;
}

见http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

但是，如果将 flex 方向更改为列，则容器将折叠到单个 flex 项的宽度，即使项目环绕到下一列也是如此。

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  width: 200px;
}

见http://codepen.io/tamlyn/pen/rarbeN?editors=110

如何使容器包含column 模式下的所有弹性项目？

Answer 1

我认为这是您正在寻找的 CSS：

#container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid #f00;
  padding: 1px;
}

#container > * {
  border: 1px solid #555;
  background-color: #ccc;
  height: 200px;
  width: 200px;
  margin: 1px;
}

“容器”将始终为其容器的宽度，在本例中为页面，但现在框将在其中正确调整。

如果我误解了你的问题，请告诉我。

更新

我已经玩了几天你要求的东西，而且看起来真的不可能做到你要求的......至少不是你要求的方向。

容器希望成为可能的最大宽度。除非您将容器强制为精确宽度，否则它不会是全宽，但它也不会随着弯曲内容而弯曲。

Answer 2

我实际上已经找到了一个纯 CSS 的解决方案，但它并不是世界上最完美的东西。这里是：http://codepen.io/anon/pen/vEPBKK

这里的技巧是创建一个visibility: collapsed 容器。在 flex 中，visibility: collapsed 对象使自己脱离了正常的 flex 流，但保留它们的尺寸以用于布局。这会将弹性容器扩大到所需的宽度，但不会影响弹性项目。但是，有一些警告：

1. 这需要一些小技巧。如您所见，<div> 是一个固定宽度，但它使用:nth-child 来确定它前面有多少个框。如果您的实际设计中断的行数多于或少于 3 行，则必须进行调整，而且您肯定必须调整对象的宽度。
2. 由于呈现错误，这在 IE 中不起作用。幸运的是，IE 的错误实现一开始就完全符合您的要求，没有任何更改，因此您所要做的就是为 IE 提供带有一些条件语句的自己的样式表，然后拍摄 div.magic 一些不错的旧 display: none。

HTML

<div id="container">
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="magic"></div>
</div>

CSS

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #f00;
  height: 650px;
  padding: 1px;
}

#container div.fb {
  border: 1px solid #555;
  flex: 0 0 200px;
  background-color: #ccc;
  width: 200px;
  margin: 1px;
  height: 200px;
}

#container > div.magic {
  height: 0;
  margin: 0;
  padding: 0;
  visibility: collapsed;
}

#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
  width: 408px;
}

#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
  width: 612px;
}

#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
  width: 816px;
}

Answer 3

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  border: 1px solid #f00;
}

.flex-item {
  background-color: #ccc;
  padding: 5px;
  width: 200px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid #555;
}

<div id="container" class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>

第一次尝试我不明白你的意思 作为参考资料，你可以看到这个教程 https://css-tricks.com/snippets/css/a-guide-to-flexbox/