CSS auto column-count wenn max-height festgelegt ist

Question

Ich möchte ein Layout erreichen, bei dem ein Element (in meinem Fall <ul>) auf 2 (oder mehr) Spalten erweitert wird, wenn die Höhe eine bestimmte Grenze erreicht.

Zum Beispiel, wenn die Höhe nur für 3 Elemente ausreicht, und ich habe 5, gehen die vierte und fünfte Element in die zweite Spalte, die nur erstellt wird, wenn benötigt.

Ich habe versucht, dies zu tun, indem Sie die max-height wie vorgeschlagen here mit column-count und column-width Satz auto über die columns Einstellung (habe ich versucht, sie getrennt zu, gleiches Verhalten einstellen).

Wenn ich andererseits die column-count in eine feste ganze Zahl ändere, funktioniert es und balanciert die Elemente, aber das ist nicht dynamisch, wie ich es brauche. (Wenn ich nur 2 Elemente habe, möchte ich keine 2 Spalten für sie erstellen).

Gibt es eine Möglichkeit, die Höhe zu korrigieren, und die Spalten automatisch hinzugefügt, wenn die Höhe nicht ausreicht, um alle Elemente zu passen?

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

Zu allererst CSS Columns Arbeit, die Sie column-width oder column-count setzen müssen machen. CSS-Spalten funktioniert nicht, wenn Sie nichts davon festlegen. Wenn Sie richtig verstanden haben, müssen Sie die column-fill Eigenschaft verwenden. Leider unterstützt nur Firefox es jetzt. Überprüfen Sie diese code snippet (Firefox nur).

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>

Ich denke, Sie flex in Ihrem Fall nutzen könnten. Siehe example:

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>