Генератор CSS Flexbox

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

Предпросмотр Flexbox

Контейнер и элементы

Ширина образца

100–1200 px

Высота образца

100–1200 px

Внутренний отступ

0–48 px

Разрыв между строками

0–100 px

Зазор столбца

0–100 px

Режим письма

Направление

Направление flex

Перенос

Выравнивание по главной оси

Выровнять элементы

Выровнять контент

Элементы в порядке исходного кода

Текст элемента

До 120 кодовых единиц UTF-16; текст не интерпретируется как HTML.

Рост (flex-grow)

0–10

Сжатие (flex-shrink)

0–10

Порядок

−10–10

Размер шрифта

8–48 px

Базовый размер flex

Предпочтительная ширина

Предпочтительная высота

Выравнивание элемента

Минимальный размер

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

CSS

.flex-demo {
  display: flex;
  box-sizing: border-box;
  width: 600px;
  height: 320px;
  padding: 16px;
  border: 1px solid #64748B;
  overflow: auto;
  direction: ltr;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  row-gap: 12px;
  column-gap: 12px;
  color: #0F172A;
  background: #F1F5F9;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.flex-demo > .flex-item {
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  border: 1px solid #2563EB;
  background: #DBEAFE;
  white-space: pre-wrap;
  overflow-wrap: normal;
}

.flex-demo > .flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.flex-demo > .flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.flex-demo > .flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

Фрагмент HTML нуждается в CSS. В полной загрузке примера используется тот же документ, что и в предварительной версии, включая сброс документа и политику использования ресурсов.

Главная ось: ушел → правильно; поперечная ось: топ → дно.

Элемент 1 · Порядок 0Элемент 2 · Порядок 0Элемент 3 · Порядок 0

Свойство CSS order и обратное направление меняют визуальное расположение, но не порядок элементов в коде, чтения или навигации с клавиатуры. Перемещайте элементы, чтобы изменить порядок в HTML.

Выравнивание содержимого не имеет эффекта, если перенос отключен.

«По размеру» меняет только масштаб просмотра. Размер примера задан по border-box; отступы, границы и полосы прокрутки уменьшают внутреннее пространство. Системные шрифты и отображение зависят от браузера.

Оси и исходный порядок

Элемент 1: .flex-item-1 · order: 0
Элемент 2: .flex-item-2 · order: 0
Элемент 3: .flex-item-3 · order: 0

Ваш пример генерируется локально. Этот инструмент не загружает и не сохраняет образец текста или кода.

Создайте пример Flexbox

Выберите размеры примера, направление письма, перенос и выравнивание.
Выберите каждый элемент, чтобы изменить его текст, гибкий размер, минимальное поведение и визуальный порядок.
Проверьте оси и выполните предварительный просмотр, затем скопируйте текущий фрагмент CSS и HTML или загрузите полный пример.

Понять пример

Основная ось следует за строкой или столбцом в выбранном режиме письма. Настройки обратного изменения изменяют его начало и конец; RTL — это не просто универсальный переворот по горизонтали.

Гибкая основа — это начальный основной размер, а не гарантированная окончательная ширина. Рост, взвешенное сжатие, перенос и автоматические минимальные размеры — все это влияет на результат браузера.

Элементы управления порядком исходного кода изменяют HTML. Порядок CSS и настройки обратного изменения изменяют визуальное расположение без изменения логического чтения или порядка клавиатуры.

Пример имеет фиксированные размеры border-box, внутренний отступ, границы и прокрутку. Внутреннее пространство меньше; системные шрифты и полосы прокрутки могут влиять на макет.

Полезные эксперименты

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

Включите перенос, уменьшите ширину примера и измените align-content. При nowrap это свойство не действует; при включённом переносе оно может действовать даже на одну строку.

Сравните LTR и RTL, затем попробуйте вертикальное письмо. Прочитайте физические метки начала и конца вместо того, чтобы предполагать, что строка всегда означает слева направо.

Знайте, что генерируется

Это пример ограниченного компонента фиксированного размера, а не конструктор страниц или гарантия адаптивного дизайна. Ваш реальный контент и окружающие его стили требуют отдельной проверки.

Автоматические минимальные размеры могут препятствовать ожидаемому сжатию. Опция «Разрешить размер меньше содержимого» явно устанавливает оба минимальных размера в ноль; инструмент не делает это скрытно.

Fit меняет только масштаб просмотра. Используйте 100% и содержащиеся в нем области прокрутки для просмотра деталей; Поддержка синтаксического анализа или загруженный предварительный просмотр не подтверждают рендеринг каждого браузера.

Копируется фрагмент HTML, для которого также нужен CSS. Полный HTML содержит тот же документ, что и предпросмотр, включая небольшой сброс стилей документа и ограничительную политику ресурсов.

Локальное создание

Инструмент не отправляет и не сохраняет ваш текст или сгенерированный код. Копирование и скачивание полного примера выполняются только по запросу; к другим службам сайта применяются собственные правила конфиденциальности.

Вопросы по флексбоксу

Строка следует линейной оси, а столбец — оси блока. Настройки режима записи, RTL и реверса определяют их физическое начало и конец.

Базовый и предпочтительные размеры участвуют в раскладке Flexbox, но не фиксируют окончательные размеры. На результат влияют доступное пространство, рост, сжатие, минимальные размеры содержимого и перенос.

При nowrap свойство не действует. При включённом переносе его действие также зависит от свободного места на поперечной оси и выравниваемых строк.

Нет. Визуальное изменение порядка не меняет логический порядок исходных текстов или клавиатуру. Переместите элемент в исходном порядке, если вы хотите изменить сгенерированную последовательность HTML.

Копирование HTML дает соответствующий фрагмент компонента. Загрузка представляет собой полный автономный пример с текущим CSS и тем же документом, который использовался для предварительного просмотра.

Нет. В примере зафиксированы свои настройки, но системные шрифты, браузерная отрисовка и стили на реальном сайте могут отличаться. Проверьте свой фактический контент и среду.

Нет. Пример создаётся локально; копирование и скачивание выполняются только по вашему запросу. Это не утверждение обо всех остальных службах сайта.

Источники

Эти спецификации описывают поведение CSS, используемое в примере.

Проверено 8 ноября 2026 г. Браузер выполняет верстку; эти источники не подтверждают эту реализацию.

SVG в PNG

Преобразуйте SVG-файл или вставленный код в PNG: задайте размер, прозрачный фон или цвет и используйте встроенные шрифты.

Открыть инструмент — SVG в PNG

Генератор CSS-фильтров

Настройте порядок эффектов, сравните образец и скопируйте объявление filter.

Открыть инструмент — Генератор CSS-фильтров

Калькулятор плавного размера шрифта

Задайте размеры шрифта для двух значений ширины окна. Скопируйте CSS с единицами rem и изучите модель, рассчитанную по тем же коэффициентам, что и в коде.

Открыть инструмент — Калькулятор плавного размера шрифта

Генератор CSS-кнопок

Настройте состояния кнопки, проверьте фокус клавиатуры и скопируйте HTML и CSS.

Открыть инструмент — Генератор CSS-кнопок

Генератор CSS border-radius

Настройте восемь радиусов, посмотрите результат и скопируйте CSS в пикселях или процентах.

Открыть инструмент — Генератор CSS border-radius

Генератор CSS Grid

Создайте пример CSS Grid с дорожками, размещением и именованными областями. Просматривайте, копируйте CSS и HTML или скачивайте полный пример.

Открыть инструмент — Генератор CSS Grid

Генератор CSS-тени текста

Создавайте упорядоченные тени текста, просматривайте пример и копируйте точный CSS.

Открыть инструмент — Генератор CSS-тени текста

Генератор преобразований CSS

Создавайте повторяемые двумерные преобразования CSS, редактируйте px или процентный перевод и начало координат, проверяйте поле ссылки и копируйте точные текущие объявления.

Открыть инструмент — Генератор преобразований CSS

Генератор теней CSS

Создавайте упорядоченные слои box-shadow с предпросмотром и копируйте код.

Открыть инструмент — Генератор теней CSS

Водяной знак на изображениях

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

Открыть инструмент — Водяной знак на изображениях

Генератор CSS-градиентов

Создавайте линейные и радиальные градиенты с цветами, непрозрачностью и позициями.

Открыть инструмент — Генератор CSS-градиентов

Конвертер цветов

Преобразуйте поддерживаемые значения sRGB HEX, RGB и HSL с альфа-каналом и указанной точностью.

Открыть инструмент — Конвертер цветов

Изображение в текст (OCR)

Распознавайте печатный текст на локальных PNG и JPEG, выбирайте язык и проверяйте результат перед копированием или скачиванием.

Открыть инструмент — Изображение в текст (OCR)

Чтение QR-кода из изображения

Прочитайте один QR-код из локального PNG или JPEG и проверьте текст или байты, не открывая ссылки.

Открыть инструмент — Чтение QR-кода из изображения

Проверка контрастности цветов

Сравните цвета переднего плана и фона, настройте непрозрачность и проверьте числовые пороги контрастности WCAG для текста и важных деталей интерфейса.

Открыть инструмент — Проверка контрастности цветов