列的 flex wrap答案

【问题标题】：flex wrap for columns列的 flex wrap
【发布时间】：2015-11-08 11:35:01
【问题描述】：

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

例如，我尝试了以下方法，但没有成功：

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

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

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

【问题讨论】：

标签： html css flexbox word-wrap

【解决方案1】：

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

【讨论】：

如果我可以快速跟进：如果父容器的高度不是固定的，但也是一个 flexbox（例如，随着窗口大小的调整而改变）怎么办？再次感谢！
嵌套弹性盒有点麻烦。我发现的最佳解决方案是使用带有position: absolute; 和display: flex; 的内部包装器。看到这个fiddle。

【解决方案2】：

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

【讨论】：