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