Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 38
Строго говоря — 76.33%. Partial support (12.12%) — это в основной массе старая спецификация, та, которая про display: flexbox.
Можно, конечно, использовать общее подмножество двух спецификаций и less/sass-миксины, но не уверен, что оно того стоит.
Можно, конечно, использовать общее подмножество двух спецификаций и less/sass-миксины, но не уверен, что оно того стоит.
Есть и видео этого доклада: Флексбокс, теперь понятно.
autoprefixer вам в помощь :)
> Можно, конечно, использовать общее подмножество двух спецификаций и less/sass-миксины, но не уверен, что оно того стоит.
Всякие автопрефиксеры про различия прекрасно знают и можно использовать лишь самую новую спеку.
И да, оно того стоит :)
Всякие автопрефиксеры про различия прекрасно знают и можно использовать лишь самую новую спеку.
И да, оно того стоит :)
В статье ничего не сказано, что с ним приходится тщательно подгонять кроссбраузерность, смотреть в ИЕ10 и 11, при этом 10-й сильно отличается, и кое-что на нём просто не сделаешь. В остальном всё отлично.
Скажем, не прям уж так тщательно, флексбокс поддерживается в полной мере всеми современными десктопными и мобильными браузерами, кроме OperaMini. Да ок, для Safari, iOS Safari и BB нужен, пока что, префикс. Статья не совсем об этом. А люди ведь умные все, так же как, и вы, и я знают где можно посмотреть насколько поддерживается та или иная технология, правда :)
Возможно я и ошибаюсь, конечно, но по моему, об caniuse столько раз говорили, что лишний раз повторяться не имеет смысла, наверное :)
А что касается багов, внезапно, но в IE11 поведение флексбокс самое корректное. Есть один общий баг в Chrome и Firefox, можно посмотреть в этом фиддле (в IE11 работает правильно, текст не вылазит за границы серого блока при уменьшении ширины контейнера). И еще один баг лично в Firefox связанный с работой shrink: 0; и basis: auto; можно глянуть пример тут (в Chrome и IE11 правильно).
Но я посчитал, что это настолько уникальные ситуации, что акцентировать на этом внимание в статье не стоит. Может быть я не прав. В ходе экспериментов больше багов я не обнаружил. Если вы знаете какие-то еще интересные баги, я буду рад если вы поделитесь своими ценными знаниями :)
По поводу IE10 и прочих старых браузеров, у меня есть идея, которая, по моему скромному мнению, должна всем понравиться, но не все ее поддержат, скорее всего. Давайте все вместе стремиться поддерживать только современные браузеры, я понимаю, что это не всегда возможно, но хотя бы стоит пытаться. Я уверен, что постепенно все получится. Господа разработчики IE действительно очень постарались, чтобы их браузер не портил нам настроение, или хотя бы минимально. Я считаю, что у них это вполне получается. Теперь даже шутки над IE стали неактуальны совсем :)
Возможно я и ошибаюсь, конечно, но по моему, об caniuse столько раз говорили, что лишний раз повторяться не имеет смысла, наверное :)
А что касается багов, внезапно, но в IE11 поведение флексбокс самое корректное. Есть один общий баг в Chrome и Firefox, можно посмотреть в этом фиддле (в IE11 работает правильно, текст не вылазит за границы серого блока при уменьшении ширины контейнера). И еще один баг лично в Firefox связанный с работой shrink: 0; и basis: auto; можно глянуть пример тут (в Chrome и IE11 правильно).
Но я посчитал, что это настолько уникальные ситуации, что акцентировать на этом внимание в статье не стоит. Может быть я не прав. В ходе экспериментов больше багов я не обнаружил. Если вы знаете какие-то еще интересные баги, я буду рад если вы поделитесь своими ценными знаниями :)
По поводу IE10 и прочих старых браузеров, у меня есть идея, которая, по моему скромному мнению, должна всем понравиться, но не все ее поддержат, скорее всего. Давайте все вместе стремиться поддерживать только современные браузеры, я понимаю, что это не всегда возможно, но хотя бы стоит пытаться. Я уверен, что постепенно все получится. Господа разработчики IE действительно очень постарались, чтобы их браузер не портил нам настроение, или хотя бы минимально. Я считаю, что у них это вполне получается. Теперь даже шутки над IE стали неактуальны совсем :)
Я вообще не представляю, как можно верстать без него. Во всяком случае, я начал немного верстать уже после его появления и имея к тому же опыт вёрстки GUI на Gtk и Qt, так что подход flexbox показался мне совершенно естественным, в отличие от float и inline-block.
А ваши клиенты/заказчики намеренно игнорируют половину пользователей IE?
Это одна из причин, по которым я не занимаюсь вёрсткой профессионально и не буду ей заниматься. Короче, я не по работе это делаю. А если мне потребуется сделать что-то действительно переносимое, я найду, кому это делегировать.
Ситуации разные бывают. У меня вот, например, специализация в настоящий момент — приложения для хрома, тут достаточно легко игнорировать половину ие :)
А вообще зависит от продукта. Для медийных проектов на самом деле ie 9- не нужен зачастую по ряду причин. В общем-то из-за того что доля ie9 меньше чем у ie10. В бытность мою тимлидом в «диджитал-агентстве» не раз убеждали делать ие10+, потому что прибегают все почти всегда с подпаленными волосами на пятой точке — сделать нужно было уже вчера, а флексбоксами и прочими фишками заверстать банально куда быстрее. Вот и забивали на поддержку.
Или вот проект с WebGL внутри (кстати, это было полтора года назад, а проект получил awwwards). Там вообще недолго думая на ие9 забили, потому что поддержки девятки не было и быть не могло :)
К тому же если посмотреть — на медийных проектах доля пользователей с ie 9- меньше 1.5 — 2% суммарно.
А вообще зависит от продукта. Для медийных проектов на самом деле ie 9- не нужен зачастую по ряду причин. В общем-то из-за того что доля ie9 меньше чем у ie10. В бытность мою тимлидом в «диджитал-агентстве» не раз убеждали делать ие10+, потому что прибегают все почти всегда с подпаленными волосами на пятой точке — сделать нужно было уже вчера, а флексбоксами и прочими фишками заверстать банально куда быстрее. Вот и забивали на поддержку.
Или вот проект с WebGL внутри (кстати, это было полтора года назад, а проект получил awwwards). Там вообще недолго думая на ие9 забили, потому что поддержки девятки не было и быть не могло :)
К тому же если посмотреть — на медийных проектах доля пользователей с ie 9- меньше 1.5 — 2% суммарно.
недавно нашел хорошую презентацию по этой теме, очень наглядные схемы www.slideshare.net/radyno/flexbox-39134410
Недавно тоже разбирался с flexbox, переверстал страницу с формой авторизации на сайт. Css код в 2 раза сократился. Далее буду плавно использовать flexbox везде, где не нужен старый ослик.
Кстати, зря вы на @ media-запросы наезжаете. Свойство order по-моему как раз для них словно и придумано :)
медиа-запросы это тонкая настройка, а вот флексбокс — гибкая универсальная разметка. Их можно и нужно комбинировать
медиа-запросы это тонкая настройка, а вот флексбокс — гибкая универсальная разметка. Их можно и нужно комбинировать
эммм… честно сказать, не понимаю почему Вы решили, что я наезжаю на медиа-запросы :) Наоборот даже, я за них.
Я ведь всего лишь обратил внимание, что flexbox позволяет сделать умную верстку, которая способна реагировать от свойств самого контента, а не только от фиксированных состояний viewport. Как в случае с большим постом, в примере, или взаимодействие логотипа и меню в хедере.
Да их можно и нужно комбинировать, Вы абсолютно правы.
Я ведь всего лишь обратил внимание, что flexbox позволяет сделать умную верстку, которая способна реагировать от свойств самого контента, а не только от фиксированных состояний viewport. Как в случае с большим постом, в примере, или взаимодействие логотипа и меню в хедере.
Да их можно и нужно комбинировать, Вы абсолютно правы.
Интересно, что как красиво и гибко используется элементами контент контейнера.
Вот например два одинаковых примера за исключением высоты контейнера, в одном ограничиваем jsfiddle.net/40ate3uz/, а в другом не ограничиваем jsfiddle.net/40ate3uz/3/.
Это радует. )
Вот например два одинаковых примера за исключением высоты контейнера, в одном ограничиваем jsfiddle.net/40ate3uz/, а в другом не ограничиваем jsfiddle.net/40ate3uz/3/.
Это радует. )
column: так же само как и row, только теперь главная ось направлена сверху вниз.
column-reverse: так же само как row-reverse, только главная ось направлена снизу вверх.
Как это работает можно посмотреть в примере на jsfiddle.
Не могу понять что именно — 'то же само'?
Потому что как мне кажется в таком случае не только главная ось меняет направление, а также cross-ось. Тогда можно понять поведение свойства flex-wrap при wrap-reverse;
1. когда строка jsfiddle.net/boatgvqL/ — снизу вверх.
2. когда колонки jsfiddle.net/boatgvqL/1/ — справа налево.
Да, конечно главная и кросс оси меняют направление, все верно ты понимаешь. А «так же само» имеется ввиду, что гибкие элементы так же само выстраиваются вдоль главной оси, просто сама главная ось поменяла направление, а кросс ось, ввиду того что она всегда перпендикулярна главной оси, соответственно тоже поменяла направление.
Восхитительная вещь, которую трагически нечем заменить для старичков ie, и потому не будет использоваться в коммерческих проектах еще nадцать лет. Срочно нужна революция.
Flexbox чудесен, мы долго к нему присматривались и потом реализовали на нем чат нашего маленького гибридного iOS приложения и убили сразу двух зайцев. Код стал легко поддерживаемый, он сократился в несколько раз, а еще с помощью flexbox стало проще менять направление сообщений (новые сверху/снизу) и так далее. Чудеснейшая штуковина.
Начали использовать у себя на проекте несколько месяцев назад. Иногда от мысли, что придется вдруг отказаться от такой удобной штуки ради какого-нибудь древнего ИЕ, становится не по себе. Ко всяким флоатам возвращаться нет ни какого желания
Великолепная статья, настолько подробного объяснения про flexbox нигде раньше не встречал (по крайней мере на русском языке). Спасибо.
на самом деле есть один перевод — frontender.info/a-guide-to-flexbox/
я к нему всегда как к референсу обращаюсь
я к нему всегда как к референсу обращаюсь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Практическое применение FlexBox