Mueve los controles, haz clic en una caja y mira cómo se reorganiza el contenedor flex en vivo, con el CSS exacto listo para copiar.
Todo ocurre localmente en tu navegador. Nada sale de tu dispositivo.
Haz clic en una caja para ajustar su flex individual; clic de nuevo para deseleccionar.
Ninguna caja seleccionada
El campo de pruebas es un contenedor flex real: cada control reescribe los estilos en línea del escenario, y el panel de CSS refleja exactamente lo que ves. La clave son los ejes. flex-direction elige el eje principal — row va de izquierda a derecha, column de arriba a abajo, y las variantes -reverse invierten la dirección de escritura. justify-content reparte entonces el espacio libre a lo largo del eje principal, y align-items coloca cada elemento a través del eje transversal, en ángulo recto. Cambia el escenario a column y verás que justify y align intercambian roles visuales mientras los nombres de las propiedades no se mueven.
Sí, con flexbox es seguro en cualquier navegador moderno: gap en contenedores flex llegó en Chrome 84, Firefox 63 y Safari 14.1, así que lleva años cumpliendo el estándar Baseline. Firefox lo tuvo primero y Safari el último — quien aún soporte iOS 13 o Safari 13 de escritorio necesita márgenes en lugar de gap.
Porque el gap no se descuenta del basis porcentual antes de que cierre la aritmética de box-sizing, y los basis en porcentaje se resuelven sobre el tamaño interior del contenedor. Dos hijos con flex-basis: 50% más cualquier gap ya no caben, y acaban uno por línea. Usa bases tipo calc(50% - 8px), o flex-basis: 0 con flex-grow, y deja que el navegador reparta.
No de ninguna forma que deba preocuparte hoy. Safari 14.1+ implementa fielmente la especificación moderna de flexbox, incluido gap y align-content con líneas envueltas. El viejo baile de prefijos -webkit-flex solo importa si soportas iOS 9-10, y esta herramienta no emite salida con prefijos a propósito.
Casi siempre porque el contenedor tiene una sola línea de elementos. align-content solo reparte líneas flex completas, y con flex-wrap: nowrap hay exactamente una, así que la propiedad se ignora. Activa wrap, fuerza dos líneas con un basis o min-width, y el control empieza a funcionar.
No. El campo de pruebas es CSS puro: tus ajustes se convierten en una hoja de estilos en memoria y se copian desde tu portapapeles. Nada se guarda, envía ni descarga, y la página sigue funcionando sin red.
Si acabas de usar Generador Flexbox, los siguientes pasos naturales son Generador CSS Grid, Generador Box Shadow, Generador Border Radius, o explora todas las herramientas de Herramientas diarias.