mxbeat, Не надо открывать его на мобильном.
Достаточно хрома и media запросов.
Для проверки тот же хром в адаптивном режиме.
До компа дойду, покажу скрин и заодно ссылку, как открыть диспетчер на мобильном.
так https://jsfiddle.net/g3nbLk5x/
Про перенос не поняла, что вы имели в виду без flex-wrap ничего никуда не перенесется.
И justify пишется не так, как у вас, пользуйтесь emmet
Посторонним В., Не злите меня.
Браузеру надо куда-то деть половину точки. Он может округлить в большую сторону, может в меньшую или еще как-то пытаться интерпретировать ваши нечеткие инструкции.
Что из этого хорошо, а что плохо?
Открываете Яндекс.Картинки или гугл- , набираете в строке поиска "слайдер с превью" и выбираете что вам нужно.
Вообще это любой слайдер с превью, дальше вопрос стилей как их позиционировать.
Заводите переменную, пусть будет maxValue, сначала она ноль.
Потом по очереди сравниваете все значения с maxValue. Если больше, то перезаписываете.
Дальше считаете проценты.
Визуально: либо спаны наложенные друг на друга либо прогресс-бары либо множественные фоны (не пойдет, если нужны скругленные углы).
Андрей, на примере моего браузера и кода из примера выше
Общая высота строки 19px, размер букв 10, границы по 1px. Остается 7. Ну а дальше браузер делит 7 на 2 как умеет.. Отсюда визуальные кривости.
Достаточно хрома и media запросов.
Для проверки тот же хром в адаптивном режиме.
До компа дойду, покажу скрин и заодно ссылку, как открыть диспетчер на мобильном.