CSS-live.ru

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

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

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

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

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

flexboxsheet


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

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

6 комментариев

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

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

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

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

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

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