Diffusione di colonne CSS orizzontalmente anziché verticalmente

Question

Non sono abbastanza sicuro che ciò sia possibile (almeno non dalla mia esperienza o su Google), ma mi chiedevo se c'era un modo per forzare l'ordine delle colonne CSS. Per esempio, invece di:

item1  item4  item7 
item2  item5  item8 
item3  item6  item9 

ordinarli simili:

item1  item2  item3 
item4  item5  item6 
item7  item8  item9 

proposta html simili:

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    etc... 
</ul> 

Naturalmente potrebbe utilizzare una tabella (no grazie) o galleggianti , ma speravo di utilizzare la proprietà CSS columns.

Answer 1

Ci sono due modi per farlo.

Utilizzare il display: blocco in linea; o utilizzare display: flex;

Ecco il display: blocco in linea; Esempio:

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t vertical-align: top; 
 
}

<ul> 
 
    <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> 
 
</ul>

E qui è il display: flettere; esempio:

Nota: Flex è un po 'supportato in IE11 ma completamente supportato in Edge. È completamente supportato in tutti gli evergreen.

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t width: 33.3%; 
 
}

<ul> 
 
    <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> 
 
</ul>