Pull to refresh

Comments 18

Рискую нарваться на минусы за банальную благодарность, но искреннее вам спасибо за таблицу. Много раз цеплялся глазами за кривые обрезки статей, но все время ленился разобраться с причинами и правильными методами.
Ох, есть ещё один тип головной боли — вертикальное видео называется. Определение и корректное отображение во всех браузерах — костыль на костыле
Автору спасибо за статью.
Коммент к картинке:
В последнее время все чаще звучит: «А в Firefox проверял? А в Safari?»
То ли IE лучше стал, то ли к нему просто привыкли, но факт в том, что все реже именно IE является проблемой.
Ох, только сегодня два часа потерял на фикс багов, воспроизводящихся исключительно в Safary. Причем, один из них воспроизводился только на ipad (на iphone все ок), и только в portrait ориентации. Люблю Safary.
UFO just landed and posted this here
UFO just landed and posted this here
Лично для меня это всегда было источником непредсказуемого контр интуитивного поведения flexbox, пока я об этом не знал. И, что особенно печально, об этом нигде не пишут. Ни в одном «полном руководстве» по flexbox ни слова не сказано про эту ловушку.

Ну вот. А сами туда же. «Есть проблема», о её сути – ни слова. Так в чём же проблема с min-width: auto у flex-элементов?

В контексте этой статьи в том, что длинные слова будут растягивать flex-элементы, вместо того чтобы переносится по break-word.

По спецификации auto «is the smaller of its content size and its specified size.» Минимальная ширина для текста — ширина самого длинного слова, что приводит к таким плачевным последствиям. Однако, если поместить внутрь flex-элемента картинку, или какой-нибудь широкий блок, то получим тоже самое.

Ну и вообще, даже если не брать крайние случаи, просто нарушается логика, заданная во flex свойствах. Например вот здесь элементы имеют одинаковые basis, shirk- и grow-факторы, и по идее, должны быть одинаковой ширины. Но из-за min-width: auto левый занимает больше пространства. Это я называют «контр-интуитивно».

Спасибо. Мне кажется, это пояснение стоит добавить в статью. Потому что сейчас из неё непонятно, зачем нужна эта «магия». Вы сами сказали, что напоролись на «баг» случайно, вероятно потому, что в реальной жизни он себя проявляет редко, но метко. Так что стоило бы рассказать, откуда у него ноги растут.

Согласен, только трудно поместить все, не нарушив логику повествования. Добавил немного, что относится непосредственно к теме статьи.
Во-вторых, необходимо сбросить в 0 пресловутое свойство min-width. Его значение auto было введено специально для flexbox, и к тому же сделано значением по умолчанию. И, что особенно печально, об этом нигде не пишут.

На CSS-tricks выходила статья по этому поводу.

Обратите внимание, что третье значение в свойстве flex задано с единицами измерения. Это баг в IE11, и без единиц измерения в нем ничего не работает.

Филлип Уолтон советовал писать flex-basis в процентах для сокращенной записи: 1 0 0%, так как некоторые css-минимизаторы вырезают, по его словам, px, а % оставляют.
Спасибо за ссылки! Я когда задался специально целью найти хоть какое-то упоминание min-width: auto потерпел неудачу: ) Здорово, что хоть кто-то об этом написал.
Добавил в статью про проценты.
Так называемый «shrink-factor (второй параметр свойства flex)» это свойство flex-shrink
Рекомендуется использовать свойство flex, вместо задания компонентов по отдельности, т.к. чаще всего эти три свойства (flex-shrink, flex-grow, flex-basis) нужно задавать вместе.
Sign up to leave a comment.