Generar Flexbox CSS Gratis - Arma Disenos Flex Visualmente

Usa el Generador de Flexbox CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.

Para que sirve Flexbox

Flexbox es el sistema de diseno para composiciones en una dimension: elementos ordenados en una linea, ya sea que esa linea vaya en horizontal o en vertical. Barras de navegacion, grupos de botones, filas de formularios, dialogos centrados y barras de herramientas son todos trabajos de flexbox. Antes de flexbox, centrar algo en vertical era famoso por dificil, y repartir espacio entre elementos exigia trucos fragiles de margenes. Flexbox hace ambas cosas triviales, por eso se convirtio en la herramienta de diseno por defecto para componentes.

La idea central es un contenedor con display: flex, cuyos hijos se convierten en elementos flex colocados a lo largo de un eje principal. Por defecto el eje principal va en horizontal, de izquierda a derecha. Justify-content controla el espacio a lo largo de ese eje, align-items controla la alineacion en el otro eje, y flex-wrap decide si los elementos pasan a nuevas lineas o se aprietan en una. Esas cuatro propiedades responden a la mayoria de preguntas de diseno de componentes.

Como usar la herramienta

Elige una direccion, un modo de ajuste y los dos valores de alineacion, luego pon el espacio y el numero de elementos. La vista previa muestra cajas que se mueven segun cambias ajustes, asi que puedes ver que hace cada propiedad en vez de memorizar definiciones. Cuando la disposicion se vea bien, copia el CSS del contenedor en tu hoja de estilos y pon tu contenido real en los elementos hijos.

Empieza con los valores por defecto para una barra de navegacion: direccion row, sin ajuste, justificacion space-between, alineacion center. Para un dialogo centrado, usa direccion row con justificacion center y alineacion center. Para una pila vertical de campos de formulario, cambia la direccion a column y deja que la alineacion haga el resto.

Direccion y ajuste

Flex-direction pone el eje principal. Row es el valor por defecto y sirve para disenos horizontales. Row-reverse invierte el orden, lo que a veces sirve para disenos de derecha a izquierda pero confunde si se usa solo para reordenar elementos; prefiere la propiedad order para eso. Column apila elementos en vertical, lo que sirve para formularios, menus y barras laterales. Column-reverse invierte el orden vertical con la misma advertencia.

Flex-wrap controla el desbordamiento. Nowrap, el valor por defecto, aprieta los elementos en una linea, encogiendolos si tienen tamanos flexibles, o desbordando si no los tienen. Wrap deja que los elementos fluyan a nuevas lineas, que es lo que quieres para listas de etiquetas, grupos de chips y galerias que deben recolocarse en pantallas pequenas. Wrap-reverse apila las nuevas lineas arriba en vez de abajo, lo que rara vez se necesita pero existe.

Justify y align

Justify-content reparte el espacio a lo largo del eje principal. Flex-start junta los elementos al principio, flex-end al final, center en el medio. Space-between empuja el primer elemento al inicio y el ultimo al final, repartiendo el resto de forma uniforme: el diseno clasico de navegacion. Space-around da a cada elemento el mismo espacio en ambos lados, asi que los elementos de los bordes quedan a medio espacio del borde del contenedor. Space-evenly hace todos los espacios, incluidos los de los bordes, exactamente iguales.

Align-items trabaja en el eje cruzado. Stretch, el valor por defecto, hace que los elementos llenen el tamano cruzado del contenedor, por eso las tarjetas flexbox en una fila a menudo comparten la misma altura de forma automatica. Flex-start, center y flex-end alinean los elementos a un lado o al medio. Baseline alinea los elementos por su linea base de texto, lo que importa cuando los elementos tienen texto de distintos tamanos y quieres que las lineas de texto se alineen.

Espacio y numero de elementos

Gap es el reemplazo moderno de los margenes entre elementos flex. Un valor pone el espacio, el navegador nunca anade un espacio despues del ultimo elemento, y las filas ajustadas reciben el mismo espacio que las columnas cuando pones un espacio de fila. Si aun ves tutoriales que anaden margin-right a cada elemento salvo el ultimo, son anteriores al soporte de gap; gap es mas simple y no tiene casos borde.

Flexbox frente a Grid

Usa flexbox cuando tu diseno es una linea y grid cuando es una tabla. Una barra de herramientas es flexbox; una galeria de fotos es grid. Un formulario suele ser flexbox en sus filas y columnas por separado, o grid cuando los campos se alinean en dos dimensiones. La confusion suele venir de los disenos de tarjetas, que parecen una linea cuando se ajustan pero son en realidad una rejilla: si necesitas que los elementos se alineen en columnas entre filas, grid es la respuesta, porque las filas flexbox no saben unas de otras.

Errores comunes

El error clasico es olvidar que las propiedades flex se aplican al contenedor, no a los elementos. Poner justify-content en un hijo no hace nada; pertenece al padre. Otro es esperar centrado vertical de justify-content en un diseno row: en una fila, la alineacion vertical es align-items, porque el eje cruzado es vertical. Recordar que justify sigue el eje principal y align sigue el eje cruzado evita la mayor parte de la confusion.

Generar Flexbox CSS Gratis – Arma Disenos Flex Visualmente