CSS Flex: Полная шпаргалка для быстрого освоения гибкой верстки

Введение в CSS Flex

CSS Flexbox — это мощный инструмент для создания адаптивных и гибких макетов. Он упрощает процесс выравнивания и распределения пространства между элементами в контейнере. В этой css flex шпаргалке мы рассмотрим основные свойства и их применение.

Основные свойства Flexbox

• display: flex; — активирует flex-контейнер.
• flex-direction — определяет направление главной оси (row, row-reverse, column, column-reverse).
• justify-content — управляет выравниванием элементов по главной оси (flex-start, flex-end, center, space-between, space-around).
• align-items — выравнивает элементы по поперечной оси (flex-start, flex-end, center, baseline, stretch).
• flex-wrap — позволяет элементам переноситься на новую строку (nowrap, wrap, wrap-reverse).
• flex-grow — определяет, как элемент будет расти относительно других (значение по умолчанию — 0).
• flex-shrink — определяет, как элемент будет сжиматься относительно других (значение по умолчанию — 1).
• flex-basis — задает начальный размер элемента до распределения свободного пространства.
• align-self — переопределяет значение align-items для конкретного элемента.

Примеры использования

Пример 1: Основной флекс-контейнер

Вот простой пример создания флекс-контейнера с элементами, выровненными по центру:

Пример 2: Перенос элементов

Для создания адаптивного макета с переносом элементов используйте свойство flex-wrap:

Заключение

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