固定max-height时的CSS自动列数

Question

我希望实现一种布局,<ul>当高度达到一定限度时,元素(在我的情况下为a )会扩展为2(或更多)列.

因此,例如,如果高度仅适用于3个项目,而我有5个,则第4个和第5个项目将转到第二个列,仅在需要时创建.

我试图做到这一点通过设置max-height的建议在这里与column-count和column-width设定为auto通过columns(我试着设置单独他们也同样的行为).

另一方面,如果我将其更改column-count为固定的整数,它会工作并平衡项目,但这不是动态的,因为我需要它.(如果我只有2个元素,我不想为它们创建2列).

有没有办法让高度固定,当高度不足以适应所有项目时,列会自动添加？

ul#list {
  font-family: sans-serif;
  list-style: none;
  background: #dddddd;
  max-height: 200px;
  
  columns: auto auto;
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  
  /** This works, but fixes the columns to 2, which is not what I want.
     columns: 2 auto; 
   -webkit-columns: 2 auto;
   -moz-columns: 2 auto;
  */
  
  column-gap: 10px;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  
  column-rule: 1px solid black;
  -webkit-column-rule: 1px solid rgba(100, 30, 30, 0.4);
  -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
}

li {
  height: 20px;
  padding: 2px;
}

<div id="outer">
  <ul id="list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
    <li>Item #6</li>
    <li>Item #7</li>
    <li>Item #8</li>
    <li>Item #9</li>
    <li>Item #10</li>
    <li>Item #11</li>
    <li>Item #12</li>
  </ul>
</div>

Answer 1

首先,要使CSS Columns工作,你必须设置column-width或column-count.如果您未设置任何CSS列,则无法使用 CSS列.

如果我理解正确,您需要使用column-fill属性.不幸的是,现在只有Firefox支持它.查看此代码段(仅限Firefox).

ul#list {
    font-family: sans-serif;
    list-style: none;
    background: #dddddd;
    max-height: 200px;

    /* Works only in Firefox! */
    -moz-columns: 100px auto;
    -moz-column-gap: 10px;
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
    -moz-column-fill: auto;
}

li {
    height: 20px;
    padding: 2px;
}

<div id="outer">
    <ul id="list">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>
</div>

我想,你可以在你的情况下使用flex.见例子:

ul#list {
    font-family: sans-serif;
    list-style: none;
    background: #dddddd;
    height: 200px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}

li {
    height: 20px;
    padding: 2px;
}

<div id="outer">
    <ul id="list">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>
</div>