FLEX: Размер дочерних элементов flex-wrap: wrap с 100% заполнением контейнера

Question

Есть контейнер в котором 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 );

Answer 1

Так имеете ввиду?

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  margin-bottom: 1.5%;
  margin-right: 1.5%;
  height: 100%;
  flex: 0 0 23%;
  border: 1px solid;
  list-style: none;
  text-align: center;
}

ul li:nth-child(4n) {
  margin-right: 0;
}
ul li:last-child {
    flex-grow: 1;
}

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

Answer 2

Строка с нечетным количеством имеет 3 элемента равной ширины,

думаю нужно добавить flex-grow: 1; и изменить на flex: 0 0 23%; для li. И box-sizing: border-box; желательно добавить для ul

Будет так

ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

li {
  margin-bottom: 1.5%;
  margin-right: 1.5%;
  height: 100%;
  flex: 0 0 23%;
  flex-grow: 1;
  border: 1px solid;
  list-style: none;
  text-align: center;
}

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

Answer 3

Ответ нашел в width:calc( 100% / 4 );

БЛОГ НА HUSL

FLEX: Размер дочерних элементов flex-wrap: wrap с 100% заполнением контейнера

Ответы (3 шт):