В верстке меня иногда очень выручают такие свойства flex
- Строчным элементам, для того, чтобы выровнять их(например, мелкие иконки), можно задать
display: inline-flex;- Перемещение содержимого flex-контенера на новую строку, если места больше нет:
flex-wrap: wrap;- Задать элементу уникальное, отличное от остальных выравнивание по поперечной оси:
align-self: <значение>;- Растянуть элементы по поперечной оси поможет аналог известного
justify-content: space-between;align-content: space-between;- Задать промежутки между колонками и рядами(как в гридах) помогут:
column-gap: <значение>;
row-gap: <значение>;- Как и в гридах, элементам флекс- контейнера можно задавать
order: <число>; чтобы изменить порядок по умолчанию.- Пропорции можно задавать с помощью свойства
flex:flex: 2; блок получает в два раза больше доступной ширины.Я во флексы после этого влюбилась, раньше, чуть что я рисовала грид в блокноте😂
Не забывайте о том, для флекс нужны приставки для разных браузеров здесь очень поможет autoprefixer
🔗https://autoprefixer.github.io/ru/
Подробная документация про флекс:
🔗https://developer.mozilla.org/ru/docs/Web/CSS/flex