Developer Tools
Web UtilitiesПлощадка CSS Flexbox
Визуально настраивайте свойства контейнера и элементов CSS flexbox с живым предпросмотром. Генерируйте готовый CSS-код для flex-direction, justify-content, align-items и других свойств.
Пресеты
Свойства Контейнера
Свойства Элемента
Живой Предпросмотр
1
2
3
CSS Контейнера
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}CSS Элементов
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}Связанные Инструменты
О Площадке CSS Flexbox
Как Это Работает
- Настраивайте свойства контейнера: flex-direction, flex-wrap, justify-content, align-items и align-content
- Добавляйте до 6 flex-элементов и настраивайте каждый независимо с flex-grow, flex-shrink, flex-basis, align-self и order
- Просматривайте макет в реальном времени при изменении любого свойства
- Копируйте сгенерированный CSS контейнера и элементов прямо в ваш проект
- Используйте пресеты для быстрого изучения распространённых паттернов flexbox
Общие Случаи Использования
- Интерактивное изучение свойств flexbox разметки
- Прототипирование навигационных панелей, сеток карточек и боковых панелей
- Отладка сложных проблем выравнивания flexbox
- Генерация базового CSS для распространённых шаблонов разметки
- Обучение концепциям CSS flexbox студентов
Часто Задаваемые Вопросы
Что такое Площадка CSS Flexbox?
Площадка CSS Flexbox — это интерактивный инструмент для визуальной настройки всех свойств контейнера и элементов flexbox. Изменения мгновенно отображаются в живом предпросмотре, а готовый CSS-код генерируется автоматически.
Какие свойства контейнера можно настроить?
Вы можете настроить все шесть основных свойств flex-контейнера: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) и gap (значение в пикселях).
Какие свойства можно настроить для каждого flex-элемента?
Каждый flex-элемент можно настроить с помощью: flex-grow (сколько дополнительного пространства занимает элемент), flex-shrink (насколько элемент сжимается при нехватке места), flex-basis (начальный размер), align-self (индивидуальное выравнивание) и order (визуальный порядок в контейнере).
Сколько flex-элементов можно добавить?
Вы можете добавить до 6 flex-элементов. Нажмите кнопку '+ Добавить элемент', чтобы добавить больше. Каждый элемент цветовой кодировки для удобной идентификации в предпросмотре и на панели настроек.
Как выбрать и редактировать конкретный flex-элемент?
Нажмите на любую пронумерованную вкладку в верхней части панели свойств элемента, чтобы выбрать его. Также можно нажать непосредственно на элемент в живом предпросмотре. Выбранный элемент будет выделен цветной рамкой.
Что такое пресеты и как их использовать?
Пресеты — готовые конфигурации flexbox для распространённых шаблонов разметки: 'Центрированная строка' центрирует элементы по горизонтали и вертикали, 'Центрированная колонка' выравнивает элементы вертикально по центру, 'Пространство между' равномерно распределяет элементы, 'Обёрточная сетка' использует flex-wrap, 'Растянутые элементы' использует flex-grow, 'Обратная строка' меняет порядок отображения. Нажмите пресет для мгновенного применения.
Что делает flex-grow?
flex-grow определяет, насколько flex-элемент растёт относительно других элементов при наличии дополнительного пространства в контейнере. Значение 0 означает, что элемент не будет расти. Значение 1 означает равную долю дополнительного пространства. Значение 2 означает вдвое больше пространства, чем у элемента с flex-grow: 1.
Что делает flex-shrink?
flex-shrink определяет, насколько flex-элемент сжимается относительно других элементов при нехватке пространства в контейнере. Значение 0 предотвращает сжатие. Значение 1 (по умолчанию) означает пропорциональное сжатие. Значение 2 означает сжатие вдвое быстрее.
Какие значения может принимать flex-basis?
flex-basis устанавливает начальный размер flex-элемента до распределения свободного пространства. Принимает: 'auto' (использует ширину или высоту элемента), значение длины например '100px' или '20%', 'content' (основано на содержимом) или '0' (элемент начинает с нулевого размера).
В чём разница между align-items и align-self?
align-items — свойство контейнера, применяемое ко всем flex-элементам по умолчанию. align-self переопределяет align-items для отдельного элемента. Например, если контейнер имеет align-items: center, но один элемент имеет align-self: flex-end, все элементы будут по центру, кроме этого одного.
Что делает свойство order?
Свойство order управляет визуальным порядком flex-элементов без изменения порядка в DOM. Элементы с меньшим значением order отображаются первыми. Значение по умолчанию — 0.
Как скопировать сгенерированный CSS?
Есть две кнопки копирования: одна для CSS контейнера и другая для всего CSS. Нажмите любую кнопку 'Копировать CSS', чтобы скопировать код в буфер обмена.