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方向更改为column，则容器将折叠为单个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的解决方案，但它并不是世界上最完美的东西。这是：http://codepen.io/anon/pen/vEPBKK

这里的技巧是创建一个visibility: collapsed容器。在flex中，visibility: collapsed对象将自己从正常的flex流中移出，但为了布局而保留它们的尺寸。这会将柔性容器加宽到所需的宽度，但不会影响柔性物品。但是有几点需要注意：

这需要一点摆弄。如您所见，魔术<div>是一个设定的宽度，但它使用:nth-child来确定它前面有多少个框。如果你的实际设计多于或少于3行，你必须调整它，你肯定必须调整对象的宽度。
由于渲染错误，这在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 2

我认为这是你正在寻找的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 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

柔性盒容器宽度不会增长

3 个答案: