Стовпці сітки з тегами списку, мені потрібно відображати у правильному порядку на кожні 3 стовпці, з увімкненою автоматичною шириною для всіх додаткових елементів списку HTML.
Це мій приклад:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>display: -webkit-flex;.
Я хочу перетворити результат так:
1 4 7 10
2 5 8 11
3 6 9 12
Важливо, що я працюю з цим браузером Safari, поки що я, здається, взагалі не вирішую цю проблему, я б звернувся за будь-якою допомогою :)
Тестове посилання: