Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.
Мои коллеги и друзья, чья профессия связанная с web-разработкой зачастую просили поделиться «шпаргалкой» для личного пользования, а это в итоге и сподвигло меня поделиться с хабра-сообществом своими заметками.
Инфографика разбита на 3 листа, для удобства печати и масштабирования. 1 основной лист включающий весь обзор технологии, и 2 дополнительных листа просто разбивающих основной лист на 2 части.
Комментарии (14)
demimurych
25.11.2018 22:58+1У Вас неправильно написано про flex-grow и flex-shrink
На примере flex-grow
Эти элементы рассчитываются ОТ СВОБОДНОЙ ЗОНЫ КОНТЕЙНЕРА после размещения в потоке всех элементов с учетом flex-basis
и никак не весь контейнер в целом.
т.е. разместили все элементы в потоке. Оказалось что в контейнере еще 100пикселей места.
И именно это место распределяется пропорционально от flex-grow вне зависимости от того какой был изначально контейнер или каким был изначально размер элементов.
Коэффициент рассчитывается ТОЛЬКО ЭТО этого обьема,
общая ширина контейнера не имеет НИКАКОГО ЗНАЧЕНИЯ
В случае flex-grow от свободного,
в случае flex-shrink от того насколько нужно ужать все элементы с flex-shrink чтобы компенсировать кусок который вылез за пределы контейнера.
bruian Автор
28.11.2018 03:51Приветствую и извиняюсь, что не нашел сразу времени ответить. Я немножечко в замешательстве, потому что не могу найти где у меня описана информация обратная вашему утверждению о расчете ширины элементов от свободного пространства в контейнере. Укажите пожалуйста фрагмент, где вы заметили ошибку. Т.к. просматривая текст я обнаружил несколько упоминаний об этом. У меня в описании св-ва flex-grow сказано, что элемент старается заполнить всё свободное пространство flex-контейнера. Более того приведена математическая формула расчета ширины flex-элемента, где так же фактор свободного пространства очевиден. И кстати говоря он находится в прямой зависимости от ширины контейнера (это о значении общей ширины). К формуле прилагается пример ниже где проведён расчет каждого параметра по шагам. И так же имеется краткое описание каждого компонента формулы.
altrus
25.11.2018 23:31Для тех, кто flex не знает, намного больше поможет статья по теме в стандартном формате. Таковые в нете есть.
Для тех, кто знает, но кому нужна шпаргалка напомнить, достаточно будет перечисления свойств flexbof-a, по их названиями их действия понятны.
Можно все уменьшить раз в 5 и привести в божеский вид, короче.
CoolWolf
25.11.2018 23:57+1«Как простую вещь объяснить максимально сложно». Вот так это называется.
Флексы вполне интуитивны, и краткого руководства типа вот этого, например, более чем достаточно.kblcuk
26.11.2018 00:49+1Вот уж действительно, сам регулярно заглядываю на эту же шпаргалку от css-tricks, там всё в разы нагляднее.
bruian Автор
28.11.2018 03:54Просматривая комментарии к публикации я обнаружил претензии следующего рода.
- Монструозность (много текста в jpg)
- Есть иные шпаргалки и руководства
во многом я соглашусь, особенно с тем что имеются иные руководства и шпаргалки (очень даже хорошие), однако в большинстве своём это не менее объемные массивы текста и иллюстраций. Моя цель была свести всё в одно-листовой массив «текста», для того что-бы можно было распечатать и положить перед глазами на период когда читатель ещё знакомится с технологией. А по поводу монструозности, тут уж простите у меня хворь на дизайн и графику, как технарь я постарался сделать более-менее опрятно. Я не претендую на оригинальность и приветствую критику по технической части. Укажите блок где неверная информация или бы по вашему мнению можно было иначе выразить-нарисовать-рассказать. Учту, поправлю. А так и на iPhone найдётся покупатель и на Android (это о предпочтениях). От себя добавлю в копилку отличную интерактивную шпаргалку
tegArt
Далее просто личное мнение:
сжато? это просто офигенно большая куча текста в jpg формате1. это не инфографика, а просто текст в jpg формате
2. это не «шпаргалка», а просто текст в jpg формате
3.
4. я верстаю с начала 2000х, и флексбоксы это, пожалуй, лучшее что произошло в верстке с тех времен. и лучшее это потому, что они удобные, понятные, и шпаргалка по флексбоксам займет от силы 10 строк. ваша «шпаргалка» способна побудить верстака вернуться на 20 лет назад к таблицам :)
Suvitruf
tegArt
Извините, но если речь не о кроссбраузерности среди браузерных мамонтов, которые в принципе не поддерживают флексбоксы, — то все должно быть нормально. И если вы часто мучаетесь с флексами — либо не используйте их, либо фронтендера меняйте. Эта монструозная «шпаргалка» явно не поможет вам решить надуманных проблем с кроссбраузерностью. Флексбокс во всех актуальных браузерах работает отлично, даже эдж справляется.
profesor08
С прокруткой там все в порядке. Когда я только начинал их использовать, попадал в ситуации, когда не понимал что происходит, и почему все косячит в разных браузерах. А все потому, что «готовил неправильно». Потом остановился, обдумал, еще раз разобрался что да как там работает, и проблема испарилась, даже в мат часть не вдавался, все как-то интуитивно.
TheShock
Я был бы крайне благодарен, если бы вы написали эти 10 строк.
С остальными вашими тезисами — согласен. Особенно с jpg.
Avitale
Извините, что влезаю в ваш разговор, но на Хабре была хорошая шпаргалка по флексбоксам, не знаю, 10 строк там или больше, но она довольно компактная и информативная, часто ее использую.
tegArt
Про 10 строк я образно сказал, т.е. имел в виду сухую выжимку css свойств с кратким описанием — на то она и шпаргалка, чтобы напоминать, а не учить. А вот Avitale чуть выше привел очень хороший пример визуально понятной шпаргалки по флексам. И, кстати, там тоже всего 8 наводящих вопросов + вводный блок. Получается, что без визуальной составляющей шпаргалка, понятная новичку, уместилась бы в 9 предложений.
berik_iushi
вот имхо лучшая шпаргалка из всех, что встречал — Flexbox cheatsheet by @sakamies