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. Производит те же результаты только по другому маршруту.)
ДОЛГОЕ ОБЪЯСНЕНИЕ: Вот что происходит:
flex-basis:auto
, что в этом случае означает, что каждый элемент гибкости начинает изгиб по собственной ширине изображения. Итак, ваши гибкие элементы с огромным изображением имеют огромную гибкость, а ваши гибкие элементы с маленьким изображением имеют небольшую гибкость. flex-basis
, любой частью, необходимой для того, чтобы все элементы соответствовали , Так, например, каждый элемент, например, теряет 1/4 своей ширины (если это будет правая доля, чтобы сделать их все точно соответствуют контейнеру). max-width
предмета. Ваши гибкие элементы с большими изображениями , скорее всего, нарушают их max-width
в этом состоянии, потому что, например, даже если мы уберем 1/4 своего размера (в моем примере), они все еще намного больше, чем их max-width:250px
. При любых таких нарушениях мы замораживаем элемент с максимальной шириной и перезапускаем процесс сжатия. (Мы делаем что-то подобное для нарушений min-width
.) Так что, если для каждого не хватает места на 250 пикселей ширины, ваши маленькие гибкие элементы в конечном итоге вынуждены делать все сокращения. (Если мы недостаточно ограничены, что большие предметы будут сокращены до менее 250px в первом раунде сокращения - например, если мы сокращаем каждый пункт на 90%, скажем, хотя, то мелкие предметы также будут уменьшены на 90%, и они будут меньше, чем их min-width:60px
, и они замерзнут с таким размером, и мы перезапустим сокращение так же, как описано выше).
Подробнее см. в разделе фрагмента «Разрешающая гибкая длина» спецификации , если вам интересно.
Кто-то отправил ответ здесь ранее (я почти уверен, я не уверен, почему он был удален?).
Да, это разница между хром и firefox, но это легко исправлено:
.item { flex: 1 1 0; }
Это говорит браузеру, что все элементы flex должны начинаться с 0 ширины, и все они растут с той же скоростью, чтобы заполнить оставшееся пространство.