Вопрос по flexbox, css, image – Почему изображения элементов flexbox изменяются по разному в зависимости от их начального размера?

9

У меня есть четыре изображения: два маленьких, два больших (размеры указаны в html). Все они имеют ширину img, установленную на 100%, но их родительский div установлен на определенную ширину. Когда я изменяю размер окна браузера, меньшие изображения уменьшаются, а большие - нет.

У меня есть красная граница вокруг divs и зеленая граница вокруг imgs. Зеленые рамки небольших изображений сжимаются раньше, чем большие. Это почему?

http://jsfiddle.net/brcrnj80/6/

img {
  border: 3px solid green;
  width: 100%;
}

.item {
  border: 1px solid red;
  max-width: 250px;
  min-width: 60px;
  margin: 10px;
}

Спасибо

@ Adam: хорошо, но это не решает основную проблему OP, которая заключается в неправильном рендеринге из разных браузеров с одинаковыми размерами экрана. Использование медиазапросов для удаления функциональных возможностей для исправления ошибки рендеринга на самом деле не является решением, и это не то, к чему предназначались медиазапросы. Но эй, если это сработает ... Я за это. fnostro
@fnostro (по крайней мере, в FF) Цветок не начинает изменять размеры, пока грибы не станут совсем маленькими. Разве это не относится к Chrome (на данный момент нет доступа к Chrome) James Montagne
хорошо - основываясь на этом, я бы сказал, что это проблема рендеринга FF - так как @Adam предполагает, что вы, возможно, захотите убедиться, что ваш css включает в себя все различные варианты гибких определений. УвидетьРуководство по flexbox на CSS Tricks внизу смотрите разделПрефикс FlexBox fnostro
У меня нет IE11 под рукой, чтобы протестировать его, но я нашел упоминание в Интернете о IE11, имеющем еще большие проблемы при использованииmax-width на гибких предметах. James Montagne

Ваш Ответ

2   ответа
2

Кто-то разместил ответ здесь ранее (я почти уверен, я не уверен, почему он был удален?).

Да, это разница в рендеринге между Chrome и Firefox, но это легко исправить следующим образом:

.item { flex: 1 1 0; }

Это говорит браузеру, что все элементы flex должны начинаться с ширины 0, и все растут с одинаковой скоростью, чтобы заполнить оставшееся пространство.

13

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

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

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

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

По умолчанию все имеетflex-basis:auto, что в данном случае означает, что каждый изгибающий элемент начинает изгибаться на собственной ширине изображения. Таким образом, ваши гибкие элементы с огромным изображением имеют огромную гибкую основу, а ваши гибкие элементы с маленьким изображением имеют небольшую гибкую основу.Мы видим, если сумма гибких элементовflex-basis значения больше, чем контейнер. Они есть (потому что некоторые из ваших изображений огромны). Итак, мы должны уменьшить вещи.Мы сжимаем каждый гибкий элемент "честно",начиная с егоflex-basisна любую часть, необходимую для подгонки всех предметов. Так, напримеркаждый Например, элемент теряет 1/4 своей ширины (если это правильная дробь, чтобы все они точно подходили к контейнеру).ТЕПЕРЬ, мы проверяем, нарушает ли какой-либо из этих «предварительных» размеров предметаmax-width, Ваши гибкие элементы с большими изображениямибудет скорее всего нарушать ихmax-width в этом состоянии, потому что, например, даже если мы уберем 1/4 их размера (в моем примере), они все равно намного больше, чем ихmax-width:250px, За любые подобные нарушения мызаморозить предмет на его максимальной ширине, и мы возобновляем процесс сжатия. (Мы делаем что-то подобное дляmin-width нарушения.)В процессе возобновления сжатия большие изображения замораживаются с шириной 250 пикселей, а меньшие изображения отвечают за все сжатие.

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

Увидетьблок «Разрешение гибких длин» спецификации для более подробной информации, если вам интересно.

Отличные ссылки, на самом деле, не имеют большого смысла, по моему личному мнению, но спецификация не лжет. Благодарю. Adam
Это добилось цели. Наконец, я увидел пример того, когда Flex-Base вступает в игру. Благодарю. tazboy
Хотя они могут показаться одинаковыми в нынешних обстоятельствах,flex: 1 такой же какflex: 1 1 autoнеflex: 1 1 0 Adam
Нет, «flex: 1» действительно эквивалентно «flex: 1 1 0». В то время как начальное значение flex-based действительно "auto", сокращенная запись flex устанавливает его в 0 (технически "0%" в спецификации), если вы предоставляете сокращенное значение "flex" без явного flex-base. Спец ссылки:dev.w3.org/csswg/css-flexbox-1/#valdef-flex-flex-basis а такжеdev.w3.org/csswg/css-flexbox-1/#flex-initial  Конкретно "Когда опущено в сокращенной записи flex, его значение [flex-based's] равно 0%. dholbert

Похожие вопросы