Laboratorio de Flexbox
Flexbox Playground
Activa cada propiedad de flex sobre un ejemplo en vivo y muestra el CSS junto con lo que cambió cada una.
Todas las propiedades de flexbox sobre un ejemplo vivo, con una línea bajo cada control que dice qué hace realmente. La vista previa es la propia disposición flex del navegador y el CSS es ese estado puesto por escrito, así que lo que ves es lo que hará tu página.
Vista previa
Haz clic en un elemento para editar sus propias propiedades a la derecha.
Contenedor
Elemento 1
Código
- · El eje principal va en horizontal.
- · Todos los flex-grow están en 0, así que el espacio sobrante lo reparte justify-content.
Las propiedades que se quedan en su valor por defecto no se escriben. Solo aparece lo que cambiaste.
Cómo se usa
Fija las propiedades del contenedor
Dirección, ajuste de línea y las tres propiedades de alineación. Cada una tiene una frase debajo que explica qué cambia; `align-content` en particular no hace nada en absoluto con una sola línea.
Pulsa un elemento para editarlo
Grow, shrink, basis, align-self y order se aplican a un elemento. Añade y quita elementos para ver cómo redistribuye el contenedor.
Lee las notas y copia el CSS
El panel describe qué hará realmente tu disposición actual, y la salida omite cada propiedad que sigue en su valor por defecto, así que lo que copias es solo lo que cambiaste.
Preguntas frecuentes
¿Por qué mi elemento desborda en lugar de encogerse?
O `flex-shrink: 0`, o un hijo con un tamaño mínimo de contenido. El `min-width` de un elemento flex es `auto` por defecto, lo que significa que no se encogerá por debajo de su contenido; una cadena larga sin cortes o una imagen ancha es el culpable habitual. `min-width: 0` es el arreglo.
¿Cuál es la diferencia entre `align-items` y `align-content`?
`align-items` coloca cada elemento en el eje transversal. `align-content` coloca el *bloque de líneas* cuando el ajuste ha producido más de una, así que con `nowrap`, o con una sola línea, no hace absolutamente nada. Es la fuente más común de «esta propiedad está rota».
¿Debería usar `order` para reordenar cosas?
Con moderación. Cambia el orden visual y no el orden del DOM, así que los lectores de pantalla y el orden de tabulación siguen el marcado. Un usuario de teclado que tabula por una disposición reordenada visualmente salta por la pantalla, y por eso la especificación lo llama último recurso.
¿Flexbox o grid?
Flexbox para una dimensión: una fila de botones, una barra de herramientas, el interior de una tarjeta. Grid cuando filas y columnas tienen que alinearse entre sí. Si estás anidando contenedores flex para imitar una cuadrícula, lo que quieres es un grid.
Puede recibir de
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de CSS Grid
CSS Grid Builder
Dispone una cuadrícula de forma visual con áreas con nombre y emite el CSS de grid-template.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.