Ugrás a fő tartalomra
LibraTool logoLibraTool

Ingyenes CSS Flexbox generátor

Kísérletezzen a flex iránytal, becsomagolással, igazítással és helyzeti értékekkel az élő elemeken — és másolja ki a CSS-t.

Betöltés után offline is működik
Előbeállítások

Tipp: kattintson egy elemre az előnézetben a flex-grow: 1 be/kikapcsolásához rajta.

Élő előnézet
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>

🔒 Minden a böngészőjében fut — semmi nincs feltöltve.

Hogyan működik

Egy interaktív flexbox játszótér: válts a flex-direction, wrap, justify-content és align-items között, és nézd, ahogy akár 10 élő elem azonnal átrendeződik. Kattints bármelyik elemre, hogy flex-grow: 1 értéket adj neki, és lásd, hogyan foglal helyet. A CSS élőben frissül, projekted közé másolható.

  1. 1
    Állítsd be a konténert
    Irány, tördelés (wrap), justify-content, align-items, térköz.
  2. 2
    Adj hozzá elemeket
    Egy-tíz számozott flex elem.
  3. 3
    Kísérletezz
    Kattints egy elemre a flex-grow bekapcsolásához, és lásd a hatást.
  4. 4
    Másold ki a CSS-t
    A konténer (és az elem) szabályai, beillesztésre készen.

Minden a böngésződben fut — semmi nincs feltöltve.

Kapcsolódó eszközök

🟦

CSS Grid generátor

Vizuálisan tervezzen meg egy CSS gridot — sávok, egységek és hézagok — és másolja ki a generált CSS-t és HTML-t.

Próbálja ki
🌈

CSS átmenetgenerátor

Hozz létre lineáris, sugárirányú és kúpos CSS átmeneteket élő előnézettel. Másold a CSS-t egyetlen kattintással.

Próbálja ki
🎨

CSS dobozárnyék-generátor

Vizuális szerkesztő CSS box-shadow-hoz élő előnézettel, többrétegű halmozással, színválasztóval, befelé fordítható kapcsolóval és egyetlen kattintással másolható. Material, neumorfizmus és ragyogás előbeállításokat tartalmaz.

Próbálja ki

Gyakran ismételt kérdések