css – 如何使flex列容器缩小到其内容

参见英文答案 > How can I make a display:flex container expand horizontally with its wrapped contents?                                    5个
我必须实现的组件看起来像Metro上的tile组:

>组的水平流的宽度取决于组的数量
>每个组包含一个标题,其宽度必须扩展到组内容
>每个组包含按列排列的未确定数量的切片

我几乎达到了目标,但我不明白为什么Flex容器会自行扩展.有没有办法将其宽度缩小到自己的内容宽度(删除青色瓷砖右侧的蓝色空间)

演示:

http://jsfiddle.net/5ar0yyks/

CSS:

div.vertical { 
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-self:flex-start;
    align-items: flex-start;        
    background-color:blue;
    max-height:100%;
}

HTML:

<div class="vertical">
    <div class = "vertical-tile">
        1                       
    </div>      
    <div class = "vertical-tile">
        2                    
    </div>
    <div class = "vertical-tile">
        3                        
    </div>
</div>  

如果您认为这不是好方法,那么您提出的解决此问题的建议是什么?

最佳答案
我终于得到了答案

实际上,由于不同的浏览器行为关于flexbox实现,它似乎不能仅由CSS制作

代码:

$(document).ready(function() {
 $('.vertical').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

演示:

http://jsfiddle.net/btuspmz6/2/

转载注明原文:css – 如何使flex列容器缩小到其内容 - 代码日志