Question

我尝试将列表分成多个列，一旦超过父级ul）高度，我尝试使用column-count尝试将列表拆分为多个列属性但它似乎没有工作，因为列表仍然压缩在一个列上。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

使用Flex Box Property时发生了这种情况。删除显示flex，然后尝试。希望它能解决你的问题

Answer 2

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

试试这个代码段：

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;
}

<ul></ul>

<强>更新

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

align-content: flex-start将列与Flex容器的开头对齐（自flex-direction为列以来最左侧）
然后您需要从padding-left中移除默认ul，并且可能会放一点
在padding-right元素上使用一点li作为间距。

试试下面的代码：

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; 
}

<ul></ul>

注意：

为简洁起见，我使用flex-direction: column;

整合了flex-wrap: wrap;和flex-flow: column wrap;

Answer 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>

CSS3列计数属性不起作用

3 个答案: