Saltar ao contido principal
LibraTool logoLibraTool

Xerador de Flexbox CSS de balde

Experimenta coa dirección, axuste, xustificación e aliñamento flex en elementos en directo — e copia o CSS.

Funciona sen conexión unha vez cargado
Preaxustes

Consello: fai clic nun elemento na vista previa para alternar flex-grow: 1 nel.

Vista previa en directo
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>

🔒 Todo funciona no teu navegador — nada se sube.

Como funciona

Un patio de xogos interactivo de flexbox: cambia flex-direction, wrap, justify-content e align-items e mira ata 10 elementos en directo reorganizarse ao instante. Fai clic en calquera elemento para darlle flex-grow: 1 e ver como reclama espazo. O CSS actualízase en directo, listo para copiar no teu proxecto.

  1. 1
    Establece o contedor
    Dirección, wrap, justify-content, align-items, espazo.
  2. 2
    Engade elementos
    De un a dez elementos flex numerados.
  3. 3
    Experimenta
    Fai clic nun elemento para alternar flex-grow e ver o efecto.
  4. 4
    Copia o CSS
    As regras do contedor (e do elemento), listas para pegar.

Todo se executa no teu navegador — nada se sube.

Ferramentas relacionadas

🟦

Xerador de Grid CSS

Deseña visualmente unha grid CSS — pistas, unidades e espazos — e copia o CSS e HTML xerados.

Próbao
🌈

Xerador de degradados CSS

Crea degradados CSS lineais, radiais e cónicos cunha previsualización en directo. Copia o CSS cun só clic.

Próbao
🎨

Xerador de sombra CSS

Constructor visual para box-shadow CSS con previsualización en directo, apilamento de múltiples capas, selector de cor, activación de inserción e copia cun clic. Inclúe preaxustes de Material, neumorfismo e brillo.

Próbao

Preguntas frecuentes