Выравнивание по левому краю последней линии гибких ячеек

Question

Я создал гибкую структуру, похожую на таблицу, которая выглядит довольно красиво и имеет адаптивное количество ячеек, но когда последний ряд не заполнен - ​​он растягивает оставшиеся ячейки до полного размера, что выглядит неудовлетворительно.

https://jsfiddle.net/zzmaster/6uw4gm3t/3/ (чтобы увидеть это, необходимо увеличить область результатов до максимума)

Логически, justify-content: flex-start; Это нужно исправить, но это не так.

Есть ли способ вернуть оставшиеся клетки на место?

Answer 1

Вы можете исправить с помощью стиля flex: 1 1 0px CSS. Замените приведенный ниже код своим текущим кодом.

ul.text { 
  display: flex; 
  justify-content: flex-start; 
  flex-wrap: wrap; 
} 

ul.text li { 
  min-width: 300px; 
  display: inline-flex; 
}

Answer 2

измени свой css, как показано ниже!

ul.text {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
ul.text li {
  min-width: 300px;
  display: inline-flex;
  flex: 1 1 0px;
  justify-content: center;
  align-items: center;
  resize: both;
}