Generador CSS Flexbox

Edite un ejemplo de diseño delimitado, vea cómo se comportan sus ejes y elementos y copie el CSS y HTML correspondientes. La descarga completa utiliza el mismo documento que la vista previa.

Vista previa de Flexbox

Contenedor y elementos

Ancho de muestra

100–1200 px

Altura de la muestra

100–1200 px

Relleno interno

0–48 px

Espacio entre filas

0–100 px

Espacio de columna

0–100 px

Modo de escritura

Dirección

Dirección flex

Salto de línea

Alineación en el eje principal

Alinear elementos

Alinear contenido

Elementos en orden de origen

Texto del elemento

Hasta 120 unidades de código UTF-16; El texto no se interpreta como HTML.

Crecimiento (flex-grow)

0–10

Reducción (flex-shrink)

0–10

Orden

−10–10

Tamaño de fuente

8–48 px

Base flexible

Ancho preferido

Altura preferida

Alineación del elemento

Tamaño mínimo

Vista previa y código

CSS

.flex-demo {
  display: flex;
  box-sizing: border-box;
  width: 600px;
  height: 320px;
  padding: 16px;
  border: 1px solid #64748B;
  overflow: auto;
  direction: ltr;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  row-gap: 12px;
  column-gap: 12px;
  color: #0F172A;
  background: #F1F5F9;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.flex-demo > .flex-item {
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  border: 1px solid #2563EB;
  background: #DBEAFE;
  white-space: pre-wrap;
  overflow-wrap: normal;
}

.flex-demo > .flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.flex-demo > .flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.flex-demo > .flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

El fragmento HTML necesita CSS. La descarga de ejemplo completa utiliza el mismo documento que la vista previa, incluido el restablecimiento de documentos y la política de recursos.

Eje principal: izquierda → correcto; eje transversal: arriba → abajo.

Elemento 1 · Orden 0Elemento 2 · Orden 0Elemento 3 · Orden 0

La propiedad CSS order y las opciones inversas cambian la disposición visual, no el orden del código fuente, de lectura ni de teclado. Mueve los elementos para cambiar el orden en el HTML.

Alinear contenido no tiene ningún efecto cuando el ajuste está deshabilitado.

Ajustar cambia solo la escala de la vista. El ejemplo tiene dimensiones border-box fijas; el relleno, los bordes y las barras de desplazamiento reducen el espacio interior. Las fuentes y la representación pueden variar.

Ejes y orden de origen.

La propiedad CSS order y las opciones inversas cambian la disposición visual, no el orden del código fuente, de lectura ni de teclado. Mueve los elementos para cambiar el orden en el HTML.

Elemento 1: .flex-item-1 · order: 0
Elemento 2: .flex-item-2 · order: 0
Elemento 3: .flex-item-3 · order: 0

Su ejemplo se genera localmente. Esta herramienta no carga ni guarda el texto o código de muestra.

Construya un ejemplo de Flexbox

Elija el tamaño de la muestra, la dirección de escritura, el ajuste y la alineación.
Seleccione cada elemento para editar su texto, tamaño flexible, comportamiento mínimo y orden visual.
Inspeccione los ejes y obtenga una vista previa, luego copie el fragmento CSS y HTML actual o descargue el ejemplo completo.

entender el ejemplo

El eje principal sigue a la fila o columna en el modo de escritura seleccionado. La configuración inversa cambia su inicio y final; RTL no es simplemente un giro horizontal universal.

La base flexible es un tamaño principal inicial, no un ancho final garantizado. El crecimiento, la contracción ponderada, el ajuste y los tamaños mínimos automáticos influyen en el resultado del navegador.

Los controles de orden de origen cambian el HTML. El orden CSS y la configuración inversa cambian la disposición visual sin cambiar la lectura lógica ni el orden del teclado.

El ejemplo tiene dimensiones border-box fijas, relleno, bordes y desplazamiento. El espacio interior disponible es menor; las fuentes del sistema y las barras de desplazamiento pueden cambiar el diseño.

Experimentos útiles

Asigne valores de crecimiento positivos a tres elementos y compare cómo se comparte el espacio adicional. Cambie su texto y mínimos automáticos en lugar de asumir que todos los elementos flexibles se vuelven iguales.

Activa el salto de línea, reduce el ancho del ejemplo y cambia align-content. Un contenedor nowrap ignora esta propiedad; con salto activado puede aplicarse incluso si solo hay una línea.

Compare LTR y RTL, luego pruebe la escritura vertical. Lea las etiquetas físicas de inicio y fin en lugar de asumir que la fila siempre significa de izquierda a derecha.

Conoce lo que se genera

Este es un ejemplo de componente limitado de tamaño fijo, no un creador de páginas ni una garantía de diseño responsivo. Su contenido real y los estilos que lo rodean requieren su propia revisión.

Los tamaños mínimos automáticos pueden impedir la reducción esperada. La opción «Permitir tamaño menor que el contenido» fija explícitamente ambos mínimos en cero; la herramienta no lo hace de forma oculta.

Ajustar cambia sólo la escala de visualización. Utilice el 100% y las áreas de desplazamiento contenidas para inspeccionar los detalles; La compatibilidad con el análisis o una vista previa cargada no certifica la representación de todos los navegadores.

Copiar HTML proporciona un fragmento que también necesita el CSS. La descarga completa contiene el mismo documento de la vista previa, con un pequeño restablecimiento de estilos del documento y una política restrictiva de recursos.

Autoría local

La herramienta no envía ni guarda el texto o el código generado. La copia y la descarga completa se realizan solo cuando las solicitas; los demás servicios del sitio tienen sus propias reglas de privacidad.

Preguntas sobre caja flexible

La fila sigue el eje en línea y la columna sigue el eje del bloque. El modo de escritura, RTL y la configuración inversa determinan su inicio y fin físicos.

Las dimensiones básicas y preferidas participan en el diseño de Flexbox en lugar de fijar cada tamaño final. El espacio disponible, el crecimiento, los factores de contracción, el contenido mínimo y el ajuste pueden cambiar el resultado.

La propiedad no se aplica a un contenedor nowrap. Con salto activado, su efecto también depende del espacio disponible en el eje transversal y de las líneas alineadas.

No. El reordenamiento visual no reescribe la fuente lógica ni el orden del teclado. Mueva un elemento en el orden de origen cuando desee cambiar la secuencia HTML generada.

Copiar HTML proporciona el fragmento del componente coincidente. La descarga es un ejemplo completo e independiente con el CSS actual y el mismo documento utilizado para la vista previa.

No. El ejemplo usa ajustes fijos, pero las fuentes del sistema, la representación y los estilos de un sitio real pueden variar. Prueba tu contenido y entorno reales.

No. La herramienta genera el ejemplo localmente y solo lo copia o descarga cuando lo solicitas. Esto no describe la privacidad de los demás servicios del sitio.

Fuentes

Estas especificaciones describen el comportamiento de CSS utilizado en el ejemplo.

Revisado el 8 de noviembre de 2026. El navegador realiza el diseño; estas fuentes no certifican esta implementación.

SVG a PNG

Convierte un archivo SVG local o código pegado en PNG, con dimensiones definidas, transparencia y fuentes incluidas.

Abrir herramienta — SVG a PNG

Generador de filtros CSS

Ordena y repite efectos CSS, compara una muestra y copia la declaración exacta.

Abrir herramienta — Generador de filtros CSS

Calculadora de tamaño de fuente fluido

Define el tamaño de fuente para dos anchos de ventana gráfica. Copia el CSS relativo a la raíz y consulta el modelo calculado con los mismos coeficientes exportados.

Abrir herramienta — Calculadora de tamaño de fuente fluido

Generador de botones CSS

Diseña los estados de un botón nativo, comprueba el foco y copia HTML y CSS.

Abrir herramienta — Generador de botones CSS

Generador CSS de border-radius

Edita ocho radios, previsualiza una caja y copia el CSS en píxeles o porcentajes.

Abrir herramienta — Generador CSS de border-radius

Generador CSS Grid

Crea un ejemplo de CSS Grid con pistas, ubicación y áreas con nombre. Previsualiza, copia CSS o HTML y descarga el ejemplo completo.

Abrir herramienta — Generador CSS Grid

Generador CSS de sombras de texto

Crea sombras de texto ordenadas, previsualiza texto plano y copia el CSS exacto.

Abrir herramienta — Generador CSS de sombras de texto

Generador de transformación CSS

Redacte transformaciones CSS 2D repetibles, edite px o porcentaje de traducción y origen, inspeccione un cuadro de referencia y copie las declaraciones actuales exactas.

Abrir herramienta — Generador de transformación CSS

Generador de sombras CSS

Crea capas box-shadow ordenadas, previsualiza el resultado y copia el código CSS.

Abrir herramienta — Generador de sombras CSS

Marca de agua en imágenes

Añade texto o un logotipo a las imágenes, revisa los resultados y descarga archivos individuales o un ZIP.

Abrir herramienta — Marca de agua en imágenes

Generador de degradados CSS

Crea degradados lineales o radiales con colores, opacidad y puntos ajustables.

Abrir herramienta — Generador de degradados CSS

Conversor de colores

Convierte valores sRGB HEX, RGB y HSL compatibles con alfa y precisión explícita.

Abrir herramienta — Conversor de colores

Imagen a texto (OCR)

Reconoce texto impreso en PNG o JPEG locales, elige el idioma y revisa o corrige el resultado antes de copiarlo o descargarlo.

Abrir herramienta — Imagen a texto (OCR)

Lector de QR desde imagen

Lee un código QR de un PNG o JPEG local y examina el texto o los bytes sin abrir enlaces.

Abrir herramienta — Lector de QR desde imagen

Comprobador de contraste de colores

Compara los colores del primer plano y del fondo, ajusta la opacidad y comprueba los umbrales numéricos WCAG para texto y detalles esenciales de la interfaz.

Abrir herramienta — Comprobador de contraste de colores