CSS Kolonlarını Spread Yatay olarak Dikey olarak değil

Question

Bunun mümkün olabileceğinden emin değilim (en azından deneyimimden veya Googling'imden değil), ancak CSS sütunlarının sırasını zorlamak için bir yol olup olmadığını merak ediyordum.

item1  item4  item7 
item2  item5  item8 
item3  item6  item9 

böyle düzen onları:

item1  item2  item3 
item4  item5  item6 
item7  item8  item9 

verilen html böyle: Elbette

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

ben bir tablo (teşekkür) kullanabilir veya yüzen yerine Mesela ama CSS columns özelliğini kullanmayı umuyordum.

Answer 1

Bunu yapmanın iki yolu vardır.

Her iki ekranı da kullanın: satır içi bloğu; veya göster: flex;

Ekran şu şekildedir: satır içi blok; örnek: Burada

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>

Ve ekran geçerli: esnemesine; örnek:

Not: Flex, IE11'de biraz desteklenmekte, ancak Edge'de tam olarak desteklenmektedir. Tüm yaprak dökmeyen yapraklarda tamamen desteklenir.

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>