Generador de CSS Flexbox

Qué es Flexbox

Flexbox es un modelo de layout unidimensional que organiza items a lo largo de un eje (horizontal o vertical). Es la herramienta correcta cuando tenés un grupo de elementos que querés alinear, distribuir o redimensionar en una sola dirección: navbars, toolbars, listas, cards en fila.

Ejes y propiedades

• flex-direction: define el eje principal. row (default) horizontal, column vertical.
• justify-content: alinea items en el eje principal.
• align-items: alinea items en el eje cruzado.
• flex-wrap: permite que los items pasen a la siguiente línea si no entran.
• gap: espacio entre items.

Centrar es una línea

El meme de "centrar verticalmente en CSS" murió con flexbox. Hoy son tres líneas:

display: flex;
justify-content: center;
align-items: center;

Funciona en cualquier contenedor con altura definida (incluso 100vh). Adiós a las gymnastics con position: absolute y transform: translate.

flex shorthand

La propiedad flex en cada item controla cómo crece, se encoge y su tamaño base. Patrones útiles:

• flex: 1: el item ocupa el espacio disponible. Útil para columnas equitativas.
• flex: 0 0 200px: tamaño fijo de 200px, no crece ni se encoge.
• flex: 1 0 200px: mínimo 200px, crece si hay espacio.
• flex-shrink: 0: el item nunca se achica, aunque sobre espacio.

Patrones comunes

Navbar con logo a la izquierda y links a la derecha: justify-content: space-between. Form con label arriba y input abajo: flex-direction: column. Card con avatar + texto: row con gap. Footer con auto-margin: margin-top: auto en el último item lo empuja al fondo del contenedor.

Errores comunes

• Confundir ejes: si cambiás flex-direction a column, justify-content y align-items intercambian sentido.
• flex: 1 sin pensar: en algunos casos rompe overflow porque iguala todo.
• min-width default: por default los flex items no se achican menos que su contenido. Usá min-width: 0 si necesitás truncar texto.

Cuándo no usar flexbox

Si necesitás controlar filas y columnas a la vez (un grid de productos donde cada fila tiene 3 items y querés que las cards alineen verticalmente), Grid es mejor herramienta. Flexbox brilla en una dirección; Grid en dos.