Comments 18
Рискую нарваться на минусы за банальную благодарность, но искреннее вам спасибо за таблицу. Много раз цеплялся глазами за кривые обрезки статей, но все время ленился разобраться с причинами и правильными методами.
+2
Ох, есть ещё один тип головной боли — вертикальное видео называется. Определение и корректное отображение во всех браузерах — костыль на костыле
0
Автору спасибо за статью.
0
Коммент к картинке:
В последнее время все чаще звучит: «А в Firefox проверял? А в Safari?»
То ли IE лучше стал, то ли к нему просто привыкли, но факт в том, что все реже именно IE является проблемой.
В последнее время все чаще звучит: «А в Firefox проверял? А в Safari?»
То ли IE лучше стал, то ли к нему просто привыкли, но факт в том, что все реже именно IE является проблемой.
0
Ох, только сегодня два часа потерял на фикс багов, воспроизводящихся исключительно в Safary. Причем, один из них воспроизводился только на ipad (на iphone все ок), и только в portrait ориентации. Люблю Safary.
0
Лично для меня это всегда было источником непредсказуемого контр интуитивного поведения flexbox, пока я об этом не знал. И, что особенно печально, об этом нигде не пишут. Ни в одном «полном руководстве» по flexbox ни слова не сказано про эту ловушку.
Ну вот. А сами туда же. «Есть проблема», о её сути – ни слова. Так в чём же проблема с min-width: auto
у flex-элементов?
0
В контексте этой статьи в том, что длинные слова будут растягивать flex-элементы, вместо того чтобы переносится по break-word.
По спецификации auto «is the smaller of its content size and its specified size.» Минимальная ширина для текста — ширина самого длинного слова, что приводит к таким плачевным последствиям. Однако, если поместить внутрь flex-элемента картинку, или какой-нибудь широкий блок, то получим тоже самое.
Ну и вообще, даже если не брать крайние случаи, просто нарушается логика, заданная во flex свойствах. Например вот здесь элементы имеют одинаковые basis, shirk- и grow-факторы, и по идее, должны быть одинаковой ширины. Но из-за min-width: auto левый занимает больше пространства. Это я называют «контр-интуитивно».
По спецификации auto «is the smaller of its content size and its specified size.» Минимальная ширина для текста — ширина самого длинного слова, что приводит к таким плачевным последствиям. Однако, если поместить внутрь flex-элемента картинку, или какой-нибудь широкий блок, то получим тоже самое.
Ну и вообще, даже если не брать крайние случаи, просто нарушается логика, заданная во flex свойствах. Например вот здесь элементы имеют одинаковые basis, shirk- и grow-факторы, и по идее, должны быть одинаковой ширины. Но из-за min-width: auto левый занимает больше пространства. Это я называют «контр-интуитивно».
+2
Спасибо. Мне кажется, это пояснение стоит добавить в статью. Потому что сейчас из неё непонятно, зачем нужна эта «магия». Вы сами сказали, что напоролись на «баг» случайно, вероятно потому, что в реальной жизни он себя проявляет редко, но метко. Так что стоило бы рассказать, откуда у него ноги растут.
+1
Да, еще как подсказал monochromer, white-space: nowrap делает минмальную ширину текстового содержимого равной ширине текста в одну строчку.
+1
Во-вторых, необходимо сбросить в 0 пресловутое свойство min-width. Его значение auto было введено специально для flexbox, и к тому же сделано значением по умолчанию. И, что особенно печально, об этом нигде не пишут.
На CSS-tricks выходила статья по этому поводу.
Обратите внимание, что третье значение в свойстве flex задано с единицами измерения. Это баг в IE11, и без единиц измерения в нем ничего не работает.
Филлип Уолтон советовал писать flex-basis в процентах для сокращенной записи: 1 0 0%, так как некоторые css-минимизаторы вырезают, по его словам, px, а % оставляют.
0
Спасибо за ссылки! Я когда задался специально целью найти хоть какое-то упоминание min-width: auto потерпел неудачу: ) Здорово, что хоть кто-то об этом написал.
0
Добавил в статью про проценты.
0
По-моему, эта статья недооценена.
+1
Так называемый «shrink-factor (второй параметр свойства flex)» это свойство flex-shrink
0
Sign up to leave a comment.
Верстка: отображаем пользовательский контент