limonte30 окт 2016 в 12:23

Шпаргалка по Flexbox (CSS3 Flexible Box)

1 мин

387K

CSS *

Перевод

+70

Комментарии 25

limonte 30 окт 2016 в 12:27

Уважаемая администрация TM, я хотел не полагаться на внешние ресурсы и загрузить эту шпаргалку на habrastorage, но столкнулся с проблемой:

У меня к вам 2 вопроса:

Что такое длина изображения?
Зачем ограничивать загружаемую картинку по ширине/высоте?

Carduelis 30 окт 2016 в 14:12

Затем, чтобы не было таких постов

limonte 30 окт 2016 в 14:14

Для решения быть посту или не быть есть голосование. Хостинг картинок не должен решать такие вопросы.

Boomburum 30 окт 2016 в 21:29

Поправим длину на ~~глубину~~ ширину ) А ограничение — чтобы всякие 5К-обои не заливали. В данном случае длинную картинку было бы правильней порезать на несколько частей, потому что рассмотреть её на смартфоне может быть проблематично.

limonte 30 окт 2016 в 21:38

Поправим длину на ~~глубину~~ ширину

Высоту :)

А ограничение — чтобы всякие 5К-обои не заливали.

Я не против ограничения по ширине, о чем собственно и написано на главной:

Ограничение по высоте можно убрать, 5K обои будут фильтроваться валидатором по размеру картинки в МБ.

В данном случае длинную картинку было бы правильней порезать на несколько частей, потому что рассмотреть её на смартфоне может быть проблематично.

Не совсем понятно почему? Смотрю в Хроме на 5.5-дюймовом смартфоне и все выглядит так как и должно:

Odrin 31 окт 2016 в 07:59

все выглядит так как и должно

Нет, не читаемый и не выделяемый мелкий текст картинкой — это не так, как и должно быть.

taliban 31 окт 2016 в 22:27

А что вам там с телефона выделять надо? Это информационный бланк, и такие вещи очень часто картинкой делают. Или думаете если сделать 5 картинок и пустить друг за другом (что советует администрация) то сразу можно будет выделать и читабельней текст будет?

xforce 30 окт 2016 в 12:39

А где перевод-то, если всё на англицком? Может лучше как-то так: https://i.gyazo.com/a0c6a71bea0bb9dd9c3d15cfafb329bf.png

limonte 30 окт 2016 в 12:43

О! Кто-то отлично постарался. Напишите пожалуйста, кто автор переведенной шпаргалки. Если у него есть аккаунт на Хабре, буду рад зайти и поставить стрелку вверх, если нет — сообщество подарит инвайт :)

SelenIT3 30 окт 2016 в 20:38

Автор переведенной шпаргалки на Хабре есть:)

Кстати, в переведенной версии заодно исправлена некоторая визуальная неточность оригинала насчет значения space-around.

Neocaridina 30 окт 2016 в 16:46

Имхо, вместо этих фруктов проще юзать 1-2-3

Electrohedgehog 31 окт 2016 в 02:48

У Джони есть ещё одна очень хороша штука — Pocket Guide to Writing SVG (http://svgpocketguide.com/book/#intro). На мой взгляд самый хороший учебник по SVG. Если кто не знаком, настоятельно рекомендую. Переводы вроде есть, но там и без них всё очевидно.

SelenIT3 31 окт 2016 в 06:38

Если кому-то окажется удобнее с переводом, то вот он (на всякий случай:).

alfatek 31 окт 2016 в 07:36

Из нового для себя отметил align-self.

morr 31 окт 2016 в 11:40

К сожалению flexbox до сих пор нельзя использовать на продакшене.
caniuse говорит, что текущие IE, андроиды версии ниже 4.4, а так же UC Browser имеют не полную поддержку flexbox.

Avdeev 31 окт 2016 в 12:37

Можно и используется уже очень много где.
Убираем IE8 из списка поддерживаемых браузеров и используем с автопрефиксером.

SelenIT3 31 окт 2016 в 14:15

Текущие IE называются Edge и глючат с флексбоксами не больше остальных. А старые андроиды вполне могут пережить фолбэк, хоть до простой одноколоночной раскладки, к тому же на них легко ставятся (и часто установлены «из коробки») те же Хром или Опера Мини.

morr 31 окт 2016 в 14:57

Через год верю, что так и будет. Сейчас же по разным источникам раз два доля IE11 в разы превышает долю Edge.
Конечно ещё сильно зависит от аудитории сайта, но вряд ли какой-либо бизнес поймёт, если разработчики предложат потенциально выкинуть 3-5% клиентов.

Kenya 1 ноя 2016 в 11:20

никто не предлагает совсем их выкинуть, для них просто нужно предусмотреть версию сайта попроще (fallback, как написано выше)

SelenIT3 1 ноя 2016 в 15:00

У IE11 в общем-то дела не так плохи, как у IE10 и старых андроидов. По крайней мере, он понимает общепринятый беспрефиксный синтаксис и многострочность. Баги есть, да, но далеко не все они критичны и неизлечимы.

Ну и в Рунете его доля уже намного меньше 3% и продолжает быстро падать. А на популярных сайтах типа вконтакта — и вовсе меньше процента. Так что надо смотреть по конкретной аудитории.

Krivega 1 ноя 2016 в 11:20

Если уж flex-grow упомянули, то и flex-shrink тоже надо.

Avdeev 1 ноя 2016 в 18:43

flex-basis тоже не хватает

Важность этого свойства понимаешь, когда начинаешь реально работать с flexbox

R_o_u_n_d 3 ноя 2016 в 17:44

Хорошо так работать с контейнером, в который всё помещается и даже остается свободное место.
А как также волшебно ~~впихнуть невпихуемое~~ поместить в контейнер все элементы, которые в него изначально все вместе не помещаются?
Используя эти… автомасштабирование (сжатие, при необходимости), сортировку, расположение, выравнивание и прочие flex-плюшки?

limonte 20 янв 2017 в 13:00

Геймифицированный вводный курс по flexbox: http://flexboxfroggy.com/

SelenIT3 21 янв 2017 в 10:58

И еще один, поагрессивнее: http://www.flexboxdefense.com/

Ну и заодно менее геймифицированный, но тоже наглядный материал с «песочницей» до кучи :)

Зарегистрируйтесь на Хабре, чтобы оставить комментарий