列的柔性包装

Question

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

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

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

在下面的笔中，我希望第1列中不适合屏幕的数字移动到第2列，依此类推，只有在所有列都被填充的情况下，才能滚动到x方向。

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

Answer 1

您可以使用display: inline-flex;代替display: flex;。然后列不会拉伸到整个宽度。请参阅此fiddle。

Answer 2

要将flex项目包装在基于列的Flex容器中，您需要为容器定义高度。高度是像素，百分比还是视口都无关紧要。 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;  
}