Для разработчиков / Вёрстка CSS

Песочница флексбокса: настройки CSS для контейнера и элементов

Настройте направление, перенос, распределение, выравнивание и интервалы, а затем измените для каждого элемента его растягивание, сжатие, базовый размер, порядок и выравнивание. Посмотрите, как меняется макет, и скопируйте CSS.

Песочница флексбокса: настройки CSS для контейнера и элементов: Показывает интерактивный flex-контейнер с редактируемыми свойствами элементов и кратким пояснением рядом с каждым параметром. В области предварительного просмотра задана фиксированная высота, чтобы было видно эффекты на поперечной оси. Макеты Grid с общими строками и столбцами доступны в генераторе CSS Grid. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Стенд раскладки FlexboxЛокальная обработка

Полностью работает в браузере

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Используйте flexbox для строки или столбца. Используйте CSS Grid, когда и строкам, и столбцам нужны общие направляющие. Открыть генератор CSS Grid

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

Модель flex-разметки

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Свободное пространство распределяется с использованием коэффициентов увеличения и сжатия flex вдоль главной оси.

Выравнивание и доступность

Основные понятия flexbox в MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . Поперечная ось перпендикулярна главной; визуальное изменение порядка не меняет порядок элементов в документе.

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

  1. Настройте направление, перенос и выравнивание контейнера.
  2. Выберите элемент и измените его индивидуальные размеры и выравнивание.
  3. Добавляйте и удаляйте элементы, проверяйте макет и копируйте сгенерированный CSS.

Конфиденциальность и ограничения

Настройки макета обрабатываются локально в вашем браузере.

Похожие инструменты

CSS GridClip-pathФорматтер CSS

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

Почему align-content иногда ничего не меняет?

Это свойство распределяет flex-линии. Для заметного эффекта нужны перенос, несколько строк и свободное место на поперечной оси.

Меняет ли order порядок для программ чтения с экрана?

Нет. Он меняет визуальный порядок, но порядок чтения документа и навигации с клавиатуры остаётся прежним. Сохраняйте логичный порядок элементов в документе.

Когда вместо этого стоит использовать Grid?

Используйте Grid, когда строки и столбцы должны иметь общие треки. Флексбокс удобен, если элементы нужно располагать преимущественно вдоль одной оси.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен