Flexbox — мощный инструмент, состоящий из множества новых концепций, которые могут сделать его трудным для понимания и первоначального использования.
Большим плюсом CSS Flexbox является то, что его можно использовать не только для верстки макетов сайта. Также он будет очень полезен при разработке пользовательского интерфейса вашего веб-приложения.
Для того, чтобы облегчить знакомство с Flexbox, был создан набор интерактивных элементов пользовательского интерфейса под названием Flexbox Patterns. На сайте проекта вы сможете рассмотреть их подробнее. Примеры расположены на странице в следующем порядке: от простых к более сложным. В набор входят табы, сайдбары, отцентрированные блоки, а также некоторых других элементы интерфейса.
Автором этого проекта является CJ Cenizal
У проекта есть страница на GitHub, с которой можно скачать архив, содержащий Flexbox Patterns.
В заключении заметки хотелось бы обратить внимание читателя на то, что автор не рекомендует использовать код непосредственно из примеров в ваших реальных проектах, потому что он был создан в ознакомительных целях и может не удовлетворять требованиям доступности для людей с ограниченными возможностями. В нем не используются семантические HTML5-элементы, атрибуты role и тп.