列的柔性包装

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

要将弹性项目包装在基于列的弹性容器中，您需要为容器定义高度。高度是像素、百分比还是基于视口都无关紧要。 flexbox 只需要知道在哪里结束列。

这是您的代码笔，已修改（包装基于视口高度）：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;  
}

列的柔性包装

flex wrap for columns

html

css

word-wrap

flexbox