Шпаргалка по шпаргалке по Flexbox

Хотя я и не новичок в магии Flexbox, я понимаю, что пока ещё не использую её очень часто. Как результат, в конечном итоге я останавливаюсь и возвращаюсь к этой статье на CSS-Tricks, всякий раз, когда появляется возможность использовать силу Flexbox.

Я задалась целью создать наглядный материал, чтобы быстро получать краткую справку по Flexbox, когда я буду натыкаться на такие моменты неясности в будущем. Мне нравится думать об этом, как о маленькой диаграмме (блок-схеме? чем-то вроде дерева решений?), которая является шпаргалкой… основанной на шпаргалке.

В любом случае, я думаю, что поделюсь этим на всякий случай с людьми, которые, возможно, найдут этот источник полезным. Вы так же можете взглянуть на живой демо-пример, сделанный мною на CodePen, чтобы от души поупражняться в гибкости своих практических знаний.

Если вы предпочитаете видеть эту штуку в качестве PDF-файла, то вы можете взять его здесь.

flexboxsheet


Перевод статьи Flexbox Cheatsheet Cheatsheet с сайта jonibologna.com, c разрешения Джони Трайтал.

P.S. Это тоже может быть интересно:

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

  1. NMitra

    Польза

  2. Надежда

    Свойство flex не раскрыто.
    А в целом — наглядно.

  3. Саша

    Спасибо! Полезная шпаргалка.

  4. Алексей

    Скажите пожалуйста, как то можно убрать отступы между строчными блоками с помощью Flexbox или хотя бы как можно на них повлиять?

    1. SelenIT

      Можно просто заменить строчные боксы на флексбоксы, тем самым избавившись от недостатков первых. По крайней мере, в тех браузерах, которые их понимают. Можете взглянуть этот пример (и его обсуждение на форуме).

  5. Роман

    Похоже что можно уже потихоньку сайты переводить на flexbox, caniuse.com/#feat=flexbox показывает уже:
    Global 82.65% + 14.17% = 96.81%
    unprefixed: 81.36% + 5.04% = 86.4%

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.