Herramientas · CSS · Zona de pruebas Flexbox
Zona de pruebas Flexbox
Crea un diseño CSS flexbox: dirección, ajuste de línea, justificación, alineación, espacio, y crecimiento/reducción/base por elemento, con una vista previa en vivo, y copia el código.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Elige un diseño predefinido, o empieza desde la fila por defecto.
Ajusta los controles del contenedor y, después, selecciona un elemento para ajustar su propio crecimiento, reducción y base.
Copia el CSS generado.
Preguntas frecuentes
No. El diseño y el CSS generado se construyen por completo en tu navegador.
Solo se escriben los valores que difieren de los valores por defecto de CSS, igual que lo haría un desarrollador a mano - un elemento sin modificar no añade nada a la salida.
Esta propiedad solo afecta a un contenedor con varias líneas y ajuste activado. Activa el ajuste de línea para ver su efecto.
Sí, y es correcto. flex-direction: row ya se invierte automáticamente en RTL sin código adicional - esta herramienta muestra el comportamiento real de flexbox, no una aproximación de izquierda a derecha.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Flex Items Never End Up the Width You Gave Them
In flexbox, a width is a starting point, not a promise. flex-basis sets where each item begins, then grow and shrink hand out or take back whatever space is left on the line. Once you see that, most surprises stop being surprises.
Leer la guíaHow to Make One Flex Item Fill the Remaining Space
A fixed-width sidebar next to a column that takes everything else is two flex properties. Getting it to stay fixed when the window narrows, and stopping long content from breaking it, takes two more. Here is the whole set, built live.
Leer la guíaA Flexbox Header Row That Survives Longer Words
Logo on one side, links in the middle, a button on the other: space-between does it in one line. Then the page is translated, the words get longer, and the row overflows. This is how this site's own header handles it.
Leer la guía
Comentarios