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.
Funciona por completo en tu navegador. No se sube ningún archivo.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
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.
Comentarios