Generador de Flexbox

Ajusta visualmente el diseño Flexbox y genera código CSS.

•Seleccione la dirección del contenedor (fila, columna, fila inversa, columna inversa)
•Seleccione la propiedad de ajuste (nowrap, wrap, wrap-reverse)
•Ajuste la propiedad justify-content (flex-start, center, space-between, etc.)
•Ajuste la propiedad align-items (stretch, center, flex-start, etc.)
•El código CSS se generará automáticamente en el área de vista previa
•Haga clic en "Copiar" para copiar el código CSS al portapapeles

Dirección (flex-direction)

Justificar Contenido

Alinear Elementos

Flex Wrap

Espacio: 10px

Cantidad de Elementos: 3

Preview

Código CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

Comentarios

Su Nombre

CAPTCHA *