Автор Чтобы увеличить продуктивность разработки и не повторять ошибки, сделанные до нас, мы используем паттерны – небольшие заготовки (приемы, практики). Часто можно услышать про паттерны при реализаци логики. Но ведь и при верстке мы тоже может использовать какие-то устоявшиеся подходы, готовые решения. В этой будут приведены ссылки на такие вещи для CSS FlexBox верстки.
Если вы незнакомы или плохо знакомы с FlexBox, то рекомендую начать с главы 5 книги Кита Гранта CSS для профи. В ней очень хорошо подается материал. Он удобно структурирован. Хорошо понятна логика работы FlexBox.
А теперь к паттернам. Получится такой список:
- Common CSS Flexbox Layout Patterns with Example Code – приведен ряд частоупотребимых раскладок. Также будут полезными статьи: Breaking to a new row with flexbox, CSS masonry with flexbox, :nth-child(), and order.
- flexboxpatterns.com – библиотека примеров реализации элементов интерфейса (side bar, tabs, card …)
- Typical use cases of flexbox – ряд примеров реализации элементов интерфейса
- https://codepen.io/ksksoft/pen/NvjZPm – примеры раскладок
Если у вас имеются свои ссылки на паттерны, то , пожалуйста, поделитесь ими в комментариях.