32
Столбцы сетки с тегами списка, мне нужно отображать в правильном порядке на каждые 3 столбца, с автоматической шириной, включенной для каждого дополнительного элемента списка HTML.Код Flexbox работает во всех браузерах, кроме Safari. Зачем?
Это мой пример:
<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 до сих пор я не могу показаться, чтобы решить эту проблему вообще, я бы присвоить любую помощь :)
Test ссылка:
http://jsfiddle.net/rafcastro77/3zd7yspg/59/