参见英文答案 >
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;
- }