Есть контейнер в котором 9 элементов. Мне нужно расположить их:
- По 4 в каждой строке
- Элементы во всю ширину колонки
- Строка с нечетным количеством имеет 3 элемента равной ширины
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}
li {
margin-bottom: 1.5%;
margin-right: 1.5%;
height: 100%;
flex: 1 0 23%;
border: 1px solid;
list-style: none;
text-align: center;
}
ul li:nth-child(4n) {
margin-right: 0;
}
<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>
</ul>
Делал таким образом, но столкнулся с тем, что в крайней строке элементы тоже растягиваются. https://disk.yandex.ru/d/JIvFKgSAgNxYJw
Каким образом мне сделать, чтобы все дочерние были единой ширины? Например 9 (10,11) такого же размера как и остальные, но при этом заполняли 100% пространства. Голову уже сломал. Пробовал фикс ширину задавать, но у каждой колонки с правой стороны оставался зазор, а width: 23.9999% не очень красиво будет.
UPD: Ответ нашел в width:calc( 100% / 4 );