将元素从上到下排列而不是从左到右（float: 下方？）

读者 Marcin A 提出了关于一个简单的无序列表的问题，他希望将列表项垂直排列（从上到下），而不是水平排列（从左到右）。

所以像这样的标记

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

最终会变成这样

1 4
2 5
3 6

好吧，Marcin，不幸的是，你可能想要的 float: down; 不存在。有很多方法可以实现，但正如你可能猜到的那样，所有方法都有其局限性。

绝对定位

如果你知道你想要像文本图表那样确切的布局，并且知道每个元素的确切宽度和高度，那么你可以更容易地使用绝对定位来创建这种布局。这有很多 如果，但如果它主要是一组图像，则可能是这种情况。

查看 Chris Coyier 在 CodePen 上创建的 Pen gasif (@chriscoyier)

Noah Blon 提供了一个基于 Sass 的自动化版本，以便更容易地处理任意数量的列表项。

查看 Noah Blon 在 CodePen 上创建的 Pen 垂直方向的 2 列列表 – IE9+ (@noahblon)

Flexbox 列

Flexbox 就是为这种事情而生的。你可以将无序列表设为一个 flex 容器，并使用列方向，并允许换行。本质上

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

为了完全匹配布局，我将为 flex 容器应用宽度和高度。如果你没有设置宽度，则每列将根据需要尽可能宽，以填充容器。如果你没有设置高度，则项目将不会换行。

查看 Chris Coyier 在 CodePen 上创建的 Pen yHoeI (@chriscoyier)

提醒一下，为了获得最佳支持，你需要 混合使用语法。

这里的优点是项目可以是任何大小，并且行为会保持一致。缺点是仅限 IE 10+。

文本列

另一种可能性是将项目设为内联块，并使用 CSS3 文本列。本质上

ul {
  column-count: 2;
  column-gap: 0;
}
li {
  display: inline-block;
}

每个块的行为就像普通文本一样，它会在垂直方向填充列，然后再移到下一列。

查看 Chris Coyier 在 CodePen 上创建的 Pen oFyEH (@chriscoyier)

文本列在容器的宽度上平均分割，因此，如果你想非常具体地指定列宽，则必须具体指定容器的宽度。

这与 flexbox 的区别在于，它会尽力将元素在列之间平均分配。因此，如果你不想声明高度，则不必声明。

请自行添加前缀，并且同样仅限 IE 10+。

还有其他方法吗？

让我们听听你的想法！CSS很有趣。也许将来可以使用网格布局？