css – Flex框容器宽度不增长

参见英文答案 > When flexbox items wrap in column mode,container does not grow its width1
当在默认行方向上使用弹性框时,容器高度增长到包含所有的Flex项,即使它是绝对定位的.

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

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

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

但是,如果弹性方向更改为列,则容器将折叠到单个弹性项目的宽度,即使项目包装到下一列.

#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

如何使容器在列模式中包含所有Flex项目？

解决方法

我实际上发现了一个仅适用于CSS的解决方案,但它并不是世界上最完美的.这里是： http://codepen.io/anon/pen/vEPBKK

这里的诀窍是创建一个可见性：折叠的容器.在flex中,可见性：折叠的对象将自己摆脱正常的弹性流,但为了布局的目的而保留其尺寸.这将柔性容器扩大到所需的宽度,但使柔性物品不受影响.但是有一些注意事项：

>这需要一点点的困扰.你可以看到,魔术< div>是一个设置的宽度,但它使用：nth-​​child来确定它之前有多少个框.如果您的实际设计大于或等于3行,则必须进行调整,您必须调整对象的宽度.
>因为一个渲染错误,这在IE中不起作用.幸运的是,IE的不正确的实现完全符合你想要的,没有任何改变,所以你只需要给IE,它是自己的样式表与一些条件语句,并拍摄div.magic一些好的旧显示：没有.

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

原文地址：https://www.jb51.cc/css/216344.html