Настройте flex-контейнер и получите готовый CSS.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Flexbox — это модель раскладки CSS для выравнивания элементов в строку или столбец. Она управляет направлением, выравниванием по обеим осям, переносом и распределением свободного пространства. Инструмент наглядно показывает, как меняется раскладка при разных свойствах, и выдаёт готовый CSS.
flex-direction задаёт ось (строка или столбец), justify-content выравнивает по основной оси, align-items — по поперечной, flex-wrap включает перенос. Подобрав значения визуально, вы получаете точный CSS без запоминания всех комбинаций.
Flexbox удобен для раскладки в одном направлении (строка или столбец), Grid — для двумерных сеток. Часто их комбинируют.
justify-content выравнивает по основной оси (по направлению flex-direction), align-items — по перпендикулярной. Это главная пара свойств выравнивания.
Задайте ему margin-left: auto — он отодвинется к краю, забрав всё свободное место слева.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.