Верстка: отображаем пользовательский контент

[damat]

Рискую нарваться на минусы за банальную благодарность, но искреннее вам спасибо за таблицу. Много раз цеплялся глазами за кривые обрезки статей, но все время ленился разобраться с причинами и правильными методами.

[maniacscientist]

Ох, есть ещё один тип головной боли — вертикальное видео называется. Определение и корректное отображение во всех браузерах — костыль на костыле

[avv]

Автору спасибо за статью.

[leschenko]

Коммент к картинке:
В последнее время все чаще звучит: «А в Firefox проверял? А в Safari?»
То ли IE лучше стал, то ли к нему просто привыкли, но факт в том, что все реже именно IE является проблемой.

[PFight77]

Ох, только сегодня два часа потерял на фикс багов, воспроизводящихся исключительно в Safary. Причем, один из них воспроизводился только на ipad (на iphone все ок), и только в portrait ориентации. Люблю Safary.

[Mingun]

Лично для меня это всегда было источником непредсказуемого контр интуитивного поведения flexbox, пока я об этом не знал. И, что особенно печально, об этом нигде не пишут. Ни в одном «полном руководстве» по flexbox ни слова не сказано про эту ловушку.

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

[PFight77]

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

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

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

[Mingun]

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

[PFight77]

Согласен, только трудно поместить все, не нарушив логику повествования. Добавил немного, что относится непосредственно к теме статьи.

[PFight77]

Да, еще как подсказал monochromer, white-space: nowrap делает минмальную ширину текстового содержимого равной ширине текста в одну строчку.

[monochromer]

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

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

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

Филлип Уолтон советовал писать flex-basis в процентах для сокращенной записи: 1 0 0%, так как некоторые css-минимизаторы вырезают, по его словам, px, а % оставляют.

[PFight77]

Спасибо за ссылки! Я когда задался специально целью найти хоть какое-то упоминание min-width: auto потерпел неудачу: ) Здорово, что хоть кто-то об этом написал.

[PFight77]

Добавил в статью про проценты.

[dom1n1k]

По-моему, эта статья недооценена.

[corsairdnb]

Так называемый «shrink-factor (второй параметр свойства flex)» это свойство flex-shrink

[PFight77]

Рекомендуется использовать свойство flex, вместо задания компонентов по отдельности, т.к. чаще всего эти три свойства (flex-shrink, flex-grow, flex-basis) нужно задавать вместе.