Flexbox. Инфографика по технологии

Полагаю многим известна технология css верстки, как flexbox. По данной технологии написано не мало пособий и руководств. Она проста, значительно облегчает разработку сетки web-проекта и поддерживается многими современными браузерами. Это делает её популярной технологией среди web-разработчиков.

Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.

Мои коллеги и друзья, чья профессия связанная с web-разработкой зачастую просили поделиться «шпаргалкой» для личного пользования, а это в итоге и сподвигло меня поделиться с хабра-сообществом своими заметками.

Инфографика разбита на 3 листа, для удобства печати и масштабирования. 1 основной лист включающий весь обзор технологии, и 2 дополнительных листа просто разбивающих основной лист на 2 части.

Flex-Box-2505x1596
Flex-Box-sheet-A-1920x2447
Flex-Box-sheet-B-1920x2447

Ссылки на файлы в высоком разрешении
Поделиться публикацией
Комментарии 14
    +3
    Далее просто личное мнение:
    1. это не инфографика, а просто текст в jpg формате
    2. это не «шпаргалка», а просто текст в jpg формате
    3.
    Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде
    сжато? это просто офигенно большая куча текста в jpg формате
    4. я верстаю с начала 2000х, и флексбоксы это, пожалуй, лучшее что произошло в верстке с тех времен. и лучшее это потому, что они удобные, понятные, и шпаргалка по флексбоксам займет от силы 10 строк. ваша «шпаргалка» способна побудить верстака вернуться на 20 лет назад к таблицам :)
      –3
      и лучшее это потому, что они удобные
      Либо я не слишком понятливый, либо сложную вёрстку кросс-браузерно на флексах сделать, всё же, не так просто. В текущем проекте часто мучаемся с флексбоксами, особенно там, где скроллы.
        +1
        Извините, но если речь не о кроссбраузерности среди браузерных мамонтов, которые в принципе не поддерживают флексбоксы, — то все должно быть нормально. И если вы часто мучаетесь с флексами — либо не используйте их, либо фронтендера меняйте. Эта монструозная «шпаргалка» явно не поможет вам решить надуманных проблем с кроссбраузерностью. Флексбокс во всех актуальных браузерах работает отлично, даже эдж справляется.
          0
          С прокруткой там все в порядке. Когда я только начинал их использовать, попадал в ситуации, когда не понимал что происходит, и почему все косячит в разных браузерах. А все потому, что «готовил неправильно». Потом остановился, обдумал, еще раз разобрался что да как там работает, и проблема испарилась, даже в мат часть не вдавался, все как-то интуитивно.
          +3
          и шпаргалка по флексбоксам займет от силы 10 строк

          Я был бы крайне благодарен, если бы вы написали эти 10 строк.

          С остальными вашими тезисами — согласен. Особенно с jpg.
            +1
            Извините, что влезаю в ваш разговор, но на Хабре была хорошая шпаргалка по флексбоксам, не знаю, 10 строк там или больше, но она довольно компактная и информативная, часто ее использую.
              –2
              Про 10 строк я образно сказал, т.е. имел в виду сухую выжимку css свойств с кратким описанием — на то она и шпаргалка, чтобы напоминать, а не учить. А вот Avitale чуть выше привел очень хороший пример визуально понятной шпаргалки по флексам. И, кстати, там тоже всего 8 наводящих вопросов + вводный блок. Получается, что без визуальной составляющей шпаргалка, понятная новичку, уместилась бы в 9 предложений.
                0
                вот имхо лучшая шпаргалка из всех, что встречал — Flexbox cheatsheet by @sakamies
              +1
              У Вас неправильно написано про flex-grow и flex-shrink

              На примере flex-grow
              Эти элементы рассчитываются ОТ СВОБОДНОЙ ЗОНЫ КОНТЕЙНЕРА после размещения в потоке всех элементов с учетом flex-basis
              и никак не весь контейнер в целом.
              т.е. разместили все элементы в потоке. Оказалось что в контейнере еще 100пикселей места.
              И именно это место распределяется пропорционально от flex-grow вне зависимости от того какой был изначально контейнер или каким был изначально размер элементов.

              Коэффициент рассчитывается ТОЛЬКО ЭТО этого обьема,
              общая ширина контейнера не имеет НИКАКОГО ЗНАЧЕНИЯ
              В случае flex-grow от свободного,
              в случае flex-shrink от того насколько нужно ужать все элементы с flex-shrink чтобы компенсировать кусок который вылез за пределы контейнера.

                0
                Приветствую и извиняюсь, что не нашел сразу времени ответить. Я немножечко в замешательстве, потому что не могу найти где у меня описана информация обратная вашему утверждению о расчете ширины элементов от свободного пространства в контейнере. Укажите пожалуйста фрагмент, где вы заметили ошибку. Т.к. просматривая текст я обнаружил несколько упоминаний об этом. У меня в описании св-ва flex-grow сказано, что элемент старается заполнить всё свободное пространство flex-контейнера. Более того приведена математическая формула расчета ширины flex-элемента, где так же фактор свободного пространства очевиден. И кстати говоря он находится в прямой зависимости от ширины контейнера (это о значении общей ширины). К формуле прилагается пример ниже где проведён расчет каждого параметра по шагам. И так же имеется краткое описание каждого компонента формулы.
                +1
                Для тех, кто flex не знает, намного больше поможет статья по теме в стандартном формате. Таковые в нете есть.
                Для тех, кто знает, но кому нужна шпаргалка напомнить, достаточно будет перечисления свойств flexbof-a, по их названиями их действия понятны.
                Можно все уменьшить раз в 5 и привести в божеский вид, короче.
                  +1
                  «Как простую вещь объяснить максимально сложно». Вот так это называется.
                  Флексы вполне интуитивны, и краткого руководства типа вот этого, например, более чем достаточно.
                    +1
                    Вот уж действительно, сам регулярно заглядываю на эту же шпаргалку от css-tricks, там всё в разы нагляднее.
                    0
                    Просматривая комментарии к публикации я обнаружил претензии следующего рода.

                    • Монструозность (много текста в jpg)
                    • Есть иные шпаргалки и руководства

                    во многом я соглашусь, особенно с тем что имеются иные руководства и шпаргалки (очень даже хорошие), однако в большинстве своём это не менее объемные массивы текста и иллюстраций. Моя цель была свести всё в одно-листовой массив «текста», для того что-бы можно было распечатать и положить перед глазами на период когда читатель ещё знакомится с технологией. А по поводу монструозности, тут уж простите у меня хворь на дизайн и графику, как технарь я постарался сделать более-менее опрятно. Я не претендую на оригинальность и приветствую критику по технической части. Укажите блок где неверная информация или бы по вашему мнению можно было иначе выразить-нарисовать-рассказать. Учту, поправлю. А так и на iPhone найдётся покупатель и на Android (это о предпочтениях). От себя добавлю в копилку отличную интерактивную шпаргалку

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое