Получение ссылок / путей к пакетным файлам при запуске приложения

tl; dr: элементы изменяются по-разному, потому что они имеют разные flex-basis, которые основаны на размере изображения и являются значением, из которого они начинают изгибаться (уменьшаться). Каждый предмет должен сокращаться, но большие предметы сокращаются с большей начальной точки, поэтому после сжатия они становятся еще большими. (Существует также поздний алгоритм «зажима», чтобы они не становились больше, чем их max-width, поэтому в этом случае большие сумасшедшие вещи - огромные. Но, что важно, они начинают их сжатие из их flex-basis, а зажим max-width является запоздалой мыслью.)

ИСПРАВЛЕНИЕ: Если вы даете каждому элементу гибкости одну и ту же гибкую основу, например flex-basis:250px (так же, как и их max-width), вы, вероятно, получите результат, который вы ищете. Обновленная скрипка: http://jsfiddle.net/brcrnj80/10/

(Как указано в другом ответе flex: 1 1 0 (который можно выразить более кратко, чем flex:1 ) также будет работать - это означает, что flex-basis равно 0, и позволяет гибким элементам расти (вместо того, чтобы принудительно их сжимать сжимать ), до их max-width. Производит те же результаты только по другому маршруту.)

ДОЛГОЕ ОБЪЯСНЕНИЕ: Вот что происходит:

1. По умолчанию все имеют flex-basis:auto, что в этом случае означает, что каждый элемент гибкости начинает изгиб по собственной ширине изображения. Итак, ваши гибкие элементы с огромным изображением имеют огромную гибкость, а ваши гибкие элементы с маленьким изображением имеют небольшую гибкость.
2. Мы видим, если сумма значений flex ['f11] больше, чем контейнер. Они (потому что некоторые из ваших изображений огромны). Итак, мы должны сжимать вещи.
3. Мы сжимаем каждый гибкий элемент «справедливо», , начиная с его flex-basis , любой частью, необходимой для того, чтобы все элементы соответствовали , Так, например, каждый элемент, например, теряет 1/4 своей ширины (если это будет правая доля, чтобы сделать их все точно соответствуют контейнеру).
4. СЕЙЧАС, мы проверяем, любой из этих «предварительных» размеров предметов нарушает max-width предмета. Ваши гибкие элементы с большими изображениями , скорее всего, нарушают их max-width в этом состоянии, потому что, например, даже если мы уберем 1/4 своего размера (в моем примере), они все еще намного больше, чем их max-width:250px. При любых таких нарушениях мы замораживаем элемент с максимальной шириной и перезапускаем процесс сжатия. (Мы делаем что-то подобное для нарушений min-width.)
5. В перезапущенном процессе сжатия большие изображения замораживаются с шириной 250 пикселей, а меньшие изображения отвечают за все сокращения.

Так что, если для каждого не хватает места на 250 пикселей ширины, ваши маленькие гибкие элементы в конечном итоге вынуждены делать все сокращения. (Если мы недостаточно ограничены, что большие предметы будут сокращены до менее 250px в первом раунде сокращения - например, если мы сокращаем каждый пункт на 90%, скажем, хотя, то мелкие предметы также будут уменьшены на 90%, и они будут меньше, чем их min-width:60px, и они замерзнут с таким размером, и мы перезапустим сокращение так же, как описано выше).

Подробнее см. в разделе фрагмента «Разрешающая гибкая длина» спецификации , если вам интересно.