LibraTool logoLibraTool

Бесплатен Генератор на CSS Flexbox

Експериментирајте со насока, пренесување, порамнување и усогласување на елементи во живо — и копирајте го 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 grid — колони, редови, единици и празнини — и копирајте го генерираниот CSS и HTML.

Пробајте го
🎨

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

Визуелен алат за CSS box-shadow со преглед во живо, наредување повеќе слоеви, бирач на бои, вклучување на внатрешна сенка и копирање со еден клик. Вклучува претходно поставени опции за Material, неуморфизам и сјај.

Пробајте го
◖

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

Визуелно дизајнирајте заоблени агли со независна контрола на секој агол. Поддржува елиптична X/Y синтакса за органски форми.

Пробајте го

Најчесто поставувани прашања