Vés al contingut principal
LibraTool logoLibraTool

Generador de CSS Flexbox de franc

Experimenta amb direcció flex, wrap, justify i align en elements en viu — i copia el CSS.

Funciona sense connexió un cop carregat
Predefinits

Consell: fes clic a un element a la previsualització per activar/desactivar flex-grow: 1.

Previsualització en viu
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>

🔒 Tot funciona al teu navegador — res s'envia.

Com funciona

Un parc de jocs interactiu de flexbox: canvia flex-direction, wrap, justify-content i align-items i mira fins a 10 elements en directe reorganitzar-se a l'instant. Fes clic a qualsevol element per donar-li flex-grow: 1 i veure com reclama espai. El CSS s'actualitza en directe, a punt per copiar al teu projecte.

  1. 1
    Estableix el contenidor
    Direcció, ajust, justify-content, align-items, buit.
  2. 2
    Afegeix elements
    D'un a deu elements flex numerats.
  3. 3
    Experimenta
    Fes clic a un element per alternar flex-grow i veure l'efecte.
  4. 4
    Copia el CSS
    Les regles del contenidor (i de l'element), a punt per enganxar.

Tot s'executa al teu navegador — res es puja.

Eines relacionades

🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho
🌈

Generador de degradats CSS

Crea degradats CSS lineals, radials i cònics amb previsualització en viu. Copia el CSS amb un clic.

Prova-ho
🎨

Generador de box-shadow CSS

Constructor visual per a box-shadow CSS amb previsualització en viu, apilament de múltiples capes, selector de color, commutador d'inserció i còpia amb un clic. Inclou presets de Material, neumorfisme i resplendor.

Prova-ho

Preguntes freqüents