Flexbox Площадка

Интерактивный инструмент для визуального изучения и тестирования свойств CSS Flexbox. Настройте контейнер и элементы, автоматически генерируя код Pure CSS, Tailwind CSS и SCSS.

Как использовать

Настройте базовые параметры Flexbox с помощью свойств контейнера

Добавьте или удалите элементы для просмотра превью

Настройте свойства отдельных элементов

Скопируйте сгенерированный код CSS, Tailwind или SCSS

Основные возможности

Предварительный просмотр в реальном времени

Поддержка всех свойств Flexbox

Генерация кода Pure CSS, Tailwind CSS и SCSS

Динамическое добавление и удаление элементов

Поддержка адаптивного превью

Выбранный элемент

3 items

Свойства контейнера

Layout Basics

Display

Flex Direction

Alignment

Justify Content

Align Items

Advanced

Flex Wrap

Align Content

Gap

Свойства элемента

Item 1

Flex Properties

Flex Grow

Flex Shrink

Flex Basis

Position

Align Self

Order

Предварительный просмотр

Live Preview

Item 1

Selected

Item 2

Item 3

Direction:
row

Justify:
flex-start

Align:
stretch

Wrap:
nowrap

Сгенерированный код

Pure CSS

/* Container Styles */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

/* Item Styles */
.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

Часто задаваемые вопросы (FAQ)

Flexbox - это метод компоновки, введенный в CSS3. Он предоставляет гибкие возможности для размещения и выравнивания элементов внутри контейнера, что делает его идеальным для адаптивного дизайна.

justify-content управляет выравниванием по главной оси, а align-items управляет выравниванием по поперечной оси. При flex-direction: row, justify-content влияет на горизонтальное выравнивание, а align-items - на вертикальное.

flex-grow устанавливает скорость роста при заполнении доступного пространства, flex-shrink устанавливает скорость сжатия при ограниченном пространстве, а flex-basis устанавливает начальный размер. Их можно объединить, используя сокращенное свойство flex.

Tailwind CSS использует утилитарные классы, такие как flex, flex-row, justify-center и items-center для реализации Flexbox макетов. Вы можете использовать имена классов, генерируемые этим инструментом, напрямую.

Flexbox автоматически регулирует размещение элементов в зависимости от размера экрана. Используя flex-wrap и flex-direction, вы можете достичь оптимальных макетов для разных устройств.