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

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

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

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

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

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

• CSS-выражения от контейнера для дизайнеров
• Голограммы, пленочные засветки и шейдеры на чистом CSS
• День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari