Question

我必须实现的组件看起来像Metro上的tile组：

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

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

DEMO：

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>

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

Answer 1

我终于自己得到了答案

实际上，由于不同的浏览器行为导致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/

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

1 个答案: