CSS / FRONTEND · SE EJECUTA EN TU NAVEGADOR

Generador de Flexbox CSS

Crea diseños Flexbox de forma visual, ajusta cada elemento, prueba el ajuste de línea y distintos anchos, y exporta CSS, HTML, Tailwind o un enlace para compartir.

Hasta 50 elementos y 50 pasos de deshacer. Las dimensiones y el fondo son solo de vista previa. Los enlaces compartidos incluyen los nombres y la configuración.

Los enlaces compartidos incluyen los nombres y la configuración. Evita datos sensibles.

Código generado

.flex-container {
  display: flex;
  gap: 16px;
}

<div class="flex-container">
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-3">3</div>
</div>

<style>
.flex-container {
  display: flex;
  gap: 16px;
}
</style>

<div class="flex-container">
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-3">3</div>
</div>

<div class="flex gap-[16px]">
  <div class="">1</div>
  <div class="">2</div>
  <div class="">3</div>
</div>

{
  "version": 1,
  "container": {
    "display": "flex",
    "flexDirection": "row",
    "flexWrap": "nowrap",
    "justifyContent": "flex-start",
    "alignItems": "stretch",
    "alignContent": "stretch",
    "direction": "ltr",
    "gap": "16px",
    "rowGap": "16px",
    "columnGap": "16px",
    "padding": "0px"
  },
  "items": [
    {
      "alignSelf": "auto",
      "flexGrow": 0,
      "flexShrink": 1,
      "flexBasis": "auto",
      "order": 0,
      "width": "auto",
      "height": "auto",
      "minWidth": "auto",
      "minHeight": "auto",
      "maxWidth": "none",
      "maxHeight": "none",
      "marginLeft": "0px",
      "marginRight": "0px",
      "marginTop": "0px",
      "marginBottom": "0px",
      "id": "item-1",
      "label": "1"
    },
    {
      "alignSelf": "auto",
      "flexGrow": 0,
      "flexShrink": 1,
      "flexBasis": "auto",
      "order": 0,
      "width": "auto",
      "height": "auto",
      "minWidth": "auto",
      "minHeight": "auto",
      "maxWidth": "none",
      "maxHeight": "none",
      "marginLeft": "0px",
      "marginRight": "0px",
      "marginTop": "0px",
      "marginBottom": "0px",
      "id": "item-2",
      "label": "2"
    },
    {
      "alignSelf": "auto",
      "flexGrow": 0,
      "flexShrink": 1,
      "flexBasis": "auto",
      "order": 0,
      "width": "auto",
      "height": "auto",
      "minWidth": "auto",
      "minHeight": "auto",
      "maxWidth": "none",
      "maxHeight": "none",
      "marginLeft": "0px",
      "marginRight": "0px",
      "marginTop": "0px",
      "marginBottom": "0px",
      "id": "item-3",
      "label": "3"
    }
  ],
  "selectedItemId": "item-1",
  "separateGap": false,
  "output": {
    "defaults": false,
    "shorthand": false
  }
}

Opciones de salida

Incluir valores por defectoUsar forma abreviada

Importar configuración

Referencia rápida de Flexbox

flex-direction define el eje principal. justify-content reparte el espacio sobrante a lo largo de ese eje y align-items alinea en el eje transversal.

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

Grow reparte el espacio libre positivo. Shrink actúa cuando falta espacio, ponderado por el tamaño base y limitado por los tamaños mínimos.

El orden visual difiere del orden del código. El teclado y los lectores de pantalla pueden seguir el orden del HTML.

Sobre esta herramienta

Ajusta el contenedor a la izquierda y observa el resultado a la derecha: la vista previa se actualiza mientras cambias la dirección, la alineación o el espaciado, así que puedes entender cada propiedad viéndola en lugar de leerla. Cada elemento se edita por separado, con su propio grow, shrink y tamaño base, que es donde suelen aparecer los comportamientos que no se esperaban. Cuando el resultado te convenza, copia el CSS, el HTML o las clases de Tailwind. Todo ocurre en tu navegador: no se sube nada.

Cómo funciona

Elige una plantilla o empieza con el contenedor vacío.
Ajusta dirección, alineación y espaciado, y observa la vista previa.
Selecciona un elemento para cambiar su grow, shrink, tamaño base y orden.
Copia el CSS, HTML o Tailwind, o comparte el enlace con la configuración.

Privacidad

El diseño se genera en tu navegador: no se sube ni se guarda automáticamente. Al compartir de forma explícita, la configuración y los nombres viajan en la parte # del enlace.

Preguntas frecuentes

¿Por qué mi elemento no se encoge?: El tamaño mínimo automático de un elemento flex es su contenido, así que un texto largo o una imagen pueden impedir que se reduzca aunque shrink sea 1. Prueba a poner min-width: 0 en ese elemento y decide después cómo tratar el desbordamiento.
¿Qué diferencia hay entre align-items y align-content?: align-items alinea los elementos dentro de cada línea; align-content reparte las líneas entre sí y solo tiene efecto cuando el ajuste de línea está activado y los elementos realmente se reparten en varias líneas.

← Todas las herramientas CSS / Frontend