Перейти до основного вмісту
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, gap.
  2. 2
    Додайте елементи
    Від одного до десяти нумерованих flex-елементів.
  3. 3
    Експериментуйте
    Натисніть елемент, щоб перемкнути flex-grow і побачити ефект.
  4. 4
    Скопіюйте CSS
    Правила контейнера (і елемента), готові до вставлення.

Усе працює у вашому браузері — нічого не завантажується.

Схожі інструменти

🟦

Генератор CSS Grid

Візуально розробіть CSS grid — доріжки, одиниці та проміжки — та скопіюйте згенеровані CSS і HTML.

Спробувати
🌈

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

Створюйте лінійні, радіальні та конічні CSS-градієнти з живим попереднім переглядом. Копіюйте CSS одним кліком.

Спробувати
🎨

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

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

Спробувати

Часті запитання