Към основното съдържание
LibraTool logoLibraTool

CSS Flexbox генератор — безплатно

Експериментирайте с flex посока, обвиване, justify и align на живите елементи — и копирайте CSS.

Работи офлайн след зареждане
Предустройства

Съвет: кликнете на елемент в прегледа, за да включите/изключите flex-grow: 1 върху него.

Живо преглеждане
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Всичко работи в браузъра вам — нищо не се качва.

Как работи

Интерактивна площадка за flexbox: превключвайте flex-direction, wrap, justify-content и align-items и наблюдавайте до 10 живи елемента да се преподреждат мигновено. Кликнете върху произволен елемент, за да му дадете flex-grow: 1 и да видите как заема пространство. CSS се обновява на живо, готов за копиране в проекта ви.

  1. 1
    Задайте контейнера
    Посока, обвиване, justify-content, align-items, разстояние.
  2. 2
    Добавете елементи
    От един до десет номерирани flex елемента.
  3. 3
    Експериментирайте
    Кликнете върху елемент, за да превключите flex-grow и да видите ефекта.
  4. 4
    Копирайте CSS
    Правилата за контейнера (и елементите), готови за поставяне.

Всичко работи във вашия браузър — нищо не се качва.

Свързани инструменти

🟦

CSS Grid генератор

Визуално проектирайте CSS мрежа — записи, единици и празнини — и копирайте генерирания CSS и HTML.

Опитайте
🌈

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

Създайте линейни, радиални и конични CSS градиенти с жив преглед. Копирайте CSS с едно кликване.

Опитайте
🎨

Генератор на CSS box-shadow

Визуален конструктор за CSS box-shadow с жив преглед, наслагване на множество слоеве, избор на цвят, превключване на inset и копиране с едно кликване. Включва предварителни настройки за Material, ньоморфизъм и glow.

Опитайте

Често задавани въпроси