CSS3 列数属性不起作用答案

【问题标题】：CSS3 column-count property is not workingCSS3 列数属性不起作用
【发布时间】：2017-10-08 15:18:51
【问题描述】：

一旦超过父级 (ul) 的高度，我正在尝试将列表拆分为多个列，并且我正在尝试使用 column-count 属性来执行此操作，但它似乎无法作为列表仍被压缩为一列。

lis 的高度是动态的。当它们超过ul 的高度时，它们只会在同一列上被挤压，但我希望它们移动到第二列。

ul {
    max-width: 1180px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    margin: auto;
    padding: 0;
    max-height: 300px;
    width: 95%;
}
li {
    display: flex;
    flex-direction: column;
    float: left;
    height: auto !important;
}

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

【问题讨论】：

标签： html css multiple-columns

【解决方案1】：

这是在使用 Flex Box 属性时发生的。删除 display flex 然后尝试。希望能解决你的问题

【讨论】：

我把它改成了display: block 还是不行。现在它溢出了容器。
请去掉float: left from li.

【解决方案2】：

如果您想在内容超过指定高度后将ul拆分为多列，则不需要column-count。你只需要flex-wrap: wrap。

试试这个 sn-p：

for (var i = 1; i < 49; i++) {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(i));
  document.querySelector("ul").appendChild(li);
}

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 300px;
  list-style: none;
}

&lt;ul&gt;&lt;/ul&gt;

更新

根据下面的评论，您可以通过执行以下操作将列左对齐：

align-content: flex-start 将列与 flex 容器的开头对齐（最左侧，因为 flex-direction 是列）
那么您将需要从ul 中删除默认的padding-left 并可能放一点
在li 元素上使用一点padding-right 来增加间距。

试试下面的 sn-p：

for (var i = 1; i < 49; i++) {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(i));
  document.querySelector("ul").appendChild(li);
}

ul {
  display: flex;
  flex-flow: column wrap;
  max-height: 300px;
  align-content: flex-start;
  list-style: none;
  padding-left: 0;
}

/* for slight space between the columns */
li {
    padding-right: 1rem; 
}

&lt;ul&gt;&lt;/ul&gt;

注意：

为简洁起见，我使用 flex-flow: column wrap; 合并了 flex-direction: column; 和 flex-wrap: wrap;

【讨论】：

这很好用。非常感谢！只有一个问题：我想让列向左浮动，而不是在容器中均匀分布。这可能吗？
@opportunityr 当然我会用该代码发布更新。让我知道它是否有效。

【解决方案3】：

ul {
  max-width: 1180px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  margin: auto;
  padding: 0;
  max-height: 300px;
  width: 95%;
}

ul li {
  list-style: none;
}

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

【讨论】：