列柔性包装

使用flex-direction: column，一个布局内容如何从一列换到下一列而不是拉伸（并滚动）同一列。列柔性包装

我尝试以下，例如，没有成功：

{ 
flex-direction:column; 
flex-wrap:wrap; 
}

在下面的笔我想不适合在屏幕在第1列的数目移动到柱2等上，并只有在所有列都被填满的情况下，才会滚动到x方向。

http://codepen.io/anon/pen/epPeoG，

来源

2015-11-08 Rahul Gupta

你可以使用display: inline-flex;代替display: flex;。然后列不会拉伸到全宽。看到这个fiddle。

来源

2015-11-08 11:46:52 Will

快速跟进，如果我可以：如果父容器的高度不固定，但也是一个flexbox（例如，随着窗口被调整大小而改变）？再次感谢！ –

嵌套柔性盒是一个小错误。我找到的最佳解决方案是使用'position：absolute;'和'display：flex;'的内部包装器。看到这[小提琴]（http://jsfiddle.net/ft08ncao/1/）。 – Will

对于要在基于列的柔性容器中包装的柔性项目，您需要为容器定义高度。无论高度是像素，百分比还是基于视口的都不重要。 Flexbox只需要知道结束列的位置。

这是你的codepen，修改（包装是基于视高）：http://codepen.io/anon/pen/PPyEzZ

CSS

.flex-container { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 100vh; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: flex; 
}

来源

2015-11-08 13:04:22

回答

相关问题