Generador Flexbox

El generador Flexbox es un patio de juegos visual para el diseño de caja flexible CSS. Configura las propiedades del contenedor con botones y controles deslizantes, ve una vista previa en vivo, reorganiza los elementos en tiempo real y copia el CSS exacto que utiliza la vista previa. Elimina las conjeturas al recordar qué propiedad hace qué, por lo que puede crear una fila, una columna, un diseño centrado o una cuadrícula de tarjetas sin prueba ni error en las herramientas de desarrollo del navegador.

Flexbox es un modelo de diseño unidimensional: los elementos se disponen a lo largo de un eje principal y se alinean en el eje transversal. El contenedor impulsa casi todo a través de seis propiedades. flex-direction elige el eje principal y si corre hacia adelante o hacia atrás. justify-content distribuye el espacio libre a lo largo del eje principal. alinear elementos posiciona elementos en el eje transversal. flex-wrap decide si los elementos se desbordan en nuevas líneas y alinea los espacios de contenido con esas líneas una vez que se realiza el ajuste. El espacio agrega un espacio constante entre elementos sin márgenes.

Esta herramienta expone todas esas propiedades en un solo lugar y muestra el resultado inmediatamente. Debido a que la vista previa se representa con las mismas declaraciones que aparecen en el cuadro de salida, lo que ve es exactamente lo que obtiene cuando pega el CSS en su hoja de estilo. La regla generada apunta a una clase .container de forma predeterminada y enumera solo las propiedades importantes, incluido el contenido de alineación solo cuando el ajuste está habilitado, ya que no tiene ningún efecto en una sola línea.

Todo se ejecuta completamente en su navegador. No hay registro, no se carga nada y la herramienta sigue funcionando sin conexión una vez que la página se ha cargado. Es igualmente útil como ayuda para el aprendizaje para comprender cómo interactúan las propiedades flexibles y como una forma rápida de producir CSS listo para producción. Cambie la cantidad de elementos de vista previa, cambie el tamaño del contenedor en su cabeza y lea la declaración que produce la alineación que desea, ya sea una barra de navegación con espacio entre ambos ejes o una sección de héroe perfectamente centrada en ambos ejes.