Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 14
Далее просто личное мнение:
1. это не инфографика, а просто текст в jpg формате
2. это не «шпаргалка», а просто текст в jpg формате
3.
4. я верстаю с начала 2000х, и флексбоксы это, пожалуй, лучшее что произошло в верстке с тех времен. и лучшее это потому, что они удобные, понятные, и шпаргалка по флексбоксам займет от силы 10 строк. ваша «шпаргалка» способна побудить верстака вернуться на 20 лет назад к таблицам :)
1. это не инфографика, а просто текст в jpg формате
2. это не «шпаргалка», а просто текст в jpg формате
3.
Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом видесжато? это просто офигенно большая куча текста в jpg формате
4. я верстаю с начала 2000х, и флексбоксы это, пожалуй, лучшее что произошло в верстке с тех времен. и лучшее это потому, что они удобные, понятные, и шпаргалка по флексбоксам займет от силы 10 строк. ваша «шпаргалка» способна побудить верстака вернуться на 20 лет назад к таблицам :)
и лучшее это потому, что они удобныеЛибо я не слишком понятливый, либо сложную вёрстку кросс-браузерно на флексах сделать, всё же, не так просто. В текущем проекте часто мучаемся с флексбоксами, особенно там, где скроллы.
Извините, но если речь не о кроссбраузерности среди браузерных мамонтов, которые в принципе не поддерживают флексбоксы, — то все должно быть нормально. И если вы часто мучаетесь с флексами — либо не используйте их, либо фронтендера меняйте. Эта монструозная «шпаргалка» явно не поможет вам решить надуманных проблем с кроссбраузерностью. Флексбокс во всех актуальных браузерах работает отлично, даже эдж справляется.
С прокруткой там все в порядке. Когда я только начинал их использовать, попадал в ситуации, когда не понимал что происходит, и почему все косячит в разных браузерах. А все потому, что «готовил неправильно». Потом остановился, обдумал, еще раз разобрался что да как там работает, и проблема испарилась, даже в мат часть не вдавался, все как-то интуитивно.
и шпаргалка по флексбоксам займет от силы 10 строк
Я был бы крайне благодарен, если бы вы написали эти 10 строк.
С остальными вашими тезисами — согласен. Особенно с jpg.
Извините, что влезаю в ваш разговор, но на Хабре была хорошая шпаргалка по флексбоксам, не знаю, 10 строк там или больше, но она довольно компактная и информативная, часто ее использую.
Про 10 строк я образно сказал, т.е. имел в виду сухую выжимку css свойств с кратким описанием — на то она и шпаргалка, чтобы напоминать, а не учить. А вот Avitale чуть выше привел очень хороший пример визуально понятной шпаргалки по флексам. И, кстати, там тоже всего 8 наводящих вопросов + вводный блок. Получается, что без визуальной составляющей шпаргалка, понятная новичку, уместилась бы в 9 предложений.
вот имхо лучшая шпаргалка из всех, что встречал — Flexbox cheatsheet by @sakamies
У Вас неправильно написано про flex-grow и flex-shrink
На примере flex-grow
Эти элементы рассчитываются ОТ СВОБОДНОЙ ЗОНЫ КОНТЕЙНЕРА после размещения в потоке всех элементов с учетом flex-basis
и никак не весь контейнер в целом.
т.е. разместили все элементы в потоке. Оказалось что в контейнере еще 100пикселей места.
И именно это место распределяется пропорционально от flex-grow вне зависимости от того какой был изначально контейнер или каким был изначально размер элементов.
Коэффициент рассчитывается ТОЛЬКО ЭТО этого обьема,
общая ширина контейнера не имеет НИКАКОГО ЗНАЧЕНИЯ
В случае flex-grow от свободного,
в случае flex-shrink от того насколько нужно ужать все элементы с flex-shrink чтобы компенсировать кусок который вылез за пределы контейнера.
На примере flex-grow
Эти элементы рассчитываются ОТ СВОБОДНОЙ ЗОНЫ КОНТЕЙНЕРА после размещения в потоке всех элементов с учетом flex-basis
и никак не весь контейнер в целом.
т.е. разместили все элементы в потоке. Оказалось что в контейнере еще 100пикселей места.
И именно это место распределяется пропорционально от flex-grow вне зависимости от того какой был изначально контейнер или каким был изначально размер элементов.
Коэффициент рассчитывается ТОЛЬКО ЭТО этого обьема,
общая ширина контейнера не имеет НИКАКОГО ЗНАЧЕНИЯ
В случае flex-grow от свободного,
в случае flex-shrink от того насколько нужно ужать все элементы с flex-shrink чтобы компенсировать кусок который вылез за пределы контейнера.
Приветствую и извиняюсь, что не нашел сразу времени ответить. Я немножечко в замешательстве, потому что не могу найти где у меня описана информация обратная вашему утверждению о расчете ширины элементов от свободного пространства в контейнере. Укажите пожалуйста фрагмент, где вы заметили ошибку. Т.к. просматривая текст я обнаружил несколько упоминаний об этом. У меня в описании св-ва flex-grow сказано, что элемент старается заполнить всё свободное пространство flex-контейнера. Более того приведена математическая формула расчета ширины flex-элемента, где так же фактор свободного пространства очевиден. И кстати говоря он находится в прямой зависимости от ширины контейнера (это о значении общей ширины). К формуле прилагается пример ниже где проведён расчет каждого параметра по шагам. И так же имеется краткое описание каждого компонента формулы.
Для тех, кто flex не знает, намного больше поможет статья по теме в стандартном формате. Таковые в нете есть.
Для тех, кто знает, но кому нужна шпаргалка напомнить, достаточно будет перечисления свойств flexbof-a, по их названиями их действия понятны.
Можно все уменьшить раз в 5 и привести в божеский вид, короче.
Для тех, кто знает, но кому нужна шпаргалка напомнить, достаточно будет перечисления свойств flexbof-a, по их названиями их действия понятны.
Можно все уменьшить раз в 5 и привести в божеский вид, короче.
«Как простую вещь объяснить максимально сложно». Вот так это называется.
Флексы вполне интуитивны, и краткого руководства типа вот этого, например, более чем достаточно.
Флексы вполне интуитивны, и краткого руководства типа вот этого, например, более чем достаточно.
Просматривая комментарии к публикации я обнаружил претензии следующего рода.
во многом я соглашусь, особенно с тем что имеются иные руководства и шпаргалки (очень даже хорошие), однако в большинстве своём это не менее объемные массивы текста и иллюстраций. Моя цель была свести всё в одно-листовой массив «текста», для того что-бы можно было распечатать и положить перед глазами на период когда читатель ещё знакомится с технологией. А по поводу монструозности, тут уж простите у меня хворь на дизайн и графику, как технарь я постарался сделать более-менее опрятно. Я не претендую на оригинальность и приветствую критику по технической части. Укажите блок где неверная информация или бы по вашему мнению можно было иначе выразить-нарисовать-рассказать. Учту, поправлю. А так и на iPhone найдётся покупатель и на Android (это о предпочтениях). От себя добавлю в копилку отличную интерактивную шпаргалку
- Монструозность (много текста в jpg)
- Есть иные шпаргалки и руководства
во многом я соглашусь, особенно с тем что имеются иные руководства и шпаргалки (очень даже хорошие), однако в большинстве своём это не менее объемные массивы текста и иллюстраций. Моя цель была свести всё в одно-листовой массив «текста», для того что-бы можно было распечатать и положить перед глазами на период когда читатель ещё знакомится с технологией. А по поводу монструозности, тут уж простите у меня хворь на дизайн и графику, как технарь я постарался сделать более-менее опрятно. Я не претендую на оригинальность и приветствую критику по технической части. Укажите блок где неверная информация или бы по вашему мнению можно было иначе выразить-нарисовать-рассказать. Учту, поправлю. А так и на iPhone найдётся покупатель и на Android (это о предпочтениях). От себя добавлю в копилку отличную интерактивную шпаргалку
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Flexbox. Инфографика по технологии