Шпаргалка по CSS Flexbox
Справочник по свойствам CSS Flexbox, значениям и примерам готовых CSS-макетов.
Запустить инструмент
Шпаргалка по CSS Flexbox помогает быстро найти нужное свойство, его допустимые значения, понятное описание и готовый пример CSS-кода. Справочный материал четко разделен на параметры flex-контейнера и свойства дочерних flex-элементов. В блоке контейнера подробно описаны направление главной оси, правила переноса строк, общее выравнивание по осям, многострочное распределение и отступы через свойства промежутков. В блоке элементов приведены коэффициенты роста и сжатия, базовые размеры, сокращенные записи, индивидуальное выравнивание и порядок следования блоков. Наглядные практические примеры показывают центрирование блока по вертикали и горизонтали, адаптивную навигационную панель, сетку карточек с автоматическим переносом, фиксированную боковую панель, прижатый к низу подвал и колонки одинаковой высоты. Справочник пригодится во время верстки веб-страниц, когда требуется быстро вспомнить синтаксис или уточнить значения перед редактированием стилей. Сопоставьте описание со своей задачей, скопируйте нужный фрагмент разметки и стилей, а затем адаптируйте имена классов под структуру своего проекта.
Инструкция
- Изучите сведения о flex-контейнере, если настраиваете направление, перенос или выравнивание группы элементов.
- Проверьте сведения о flex-элементах, если нужно настроить рост, сжатие, базовый размер, индивидуальное выравнивание или порядок.
- Для центрирования содержимого сопоставьте задачу с примером, где используются `justify-content` и `align-items`, затем перенесите фрагмент CSS в свой макет.
- Для карточек с переносом изучите пример с `flex-wrap`, `gap`, `flex-grow` и `flex-basis`, затем замените селекторы и значения под свою структуру.
- Проверьте результат в собственном проекте, поскольку справочник не отображает макет, не проверяет CSS и не вычисляет итоговое поведение браузера.
Примеры
- Для центрирования содержимого сопоставьте задачу с примером, где используются `justify-content` и `align-items`, затем перенесите подходящий фрагмент CSS в свой макет.
- Для карточек с переносом изучите пример с `flex-wrap`, `gap`, `flex-grow` и `flex-basis`, а затем замените селекторы и значения на нужные вам.
Частые вопросы
Что содержит шпаргалка по Flexbox?
Это справочник по свойствам CSS Flexbox, их перечисленным значениям, описаниям и примерам CSS-кода. Он не вычисляет итоговое поведение макета.
Есть ли готовые примеры CSS?
Да. В справочнике есть примеры центрирования содержимого, навигационной панели, карточек с переносом, боковой панели, липкого подвала и равных колонок.
Какие свойства Flexbox охватывает справочник?
Для контейнера описаны направление главной оси, перенос, выравнивание по главной и поперечной осям, многострочное выравнивание и промежутки. Для элементов указаны рост, сжатие, базовый размер, сокращенная запись, индивидуальное выравнивание и порядок.
Какие значения показаны для gap?
В записи о `gap` приведены примеры значений длины `16px` и `1rem`. Другие значения проверяйте с учетом конкретного макета.