- ¿Qué diferencia hay entre justify-content y align-items?
- justify-content coloca los elementos en el eje principal (la dirección que marca flex-direction: row = horizontal, column = vertical). align-items los coloca en el eje transversal (perpendicular al principal). Con flex-direction: row, justify-content mueve los elementos a izquierda y derecha y align-items arriba y abajo. Se intercambian al pasar a column. Las dos propiedades nunca se pisan: cada una solo actúa en su eje.
- ¿Por qué align-content no hace nada?
- align-content solo tiene efecto cuando los elementos pasan a varias líneas. Si flex-wrap es nowrap (el valor predeterminado), todos los elementos se quedan en una línea y align-content no tiene nada que alinear. Pon flex-wrap en wrap, añade suficientes elementos para que pasen a una segunda fila y align-content empezará a controlar cómo se reparten las filas en el eje transversal.
- ¿Qué hace realmente flex-direction: row-reverse?
- Invierte el orden en que se colocan los elementos en el eje principal sin cambiar el orden del HTML. Con row-reverse, el elemento 1 queda a la derecha, el 2 a su izquierda, y así. justify-content: flex-start pasa a significar el borde derecho en lugar del izquierdo. Lo mismo con column-reverse: los elementos se apilan de abajo hacia arriba. Útil para diseños de derecha a izquierda o para reordenar visualmente sin tocar el DOM (lo que mantiene intacto el orden de tabulación y el de los lectores de pantalla).
- ¿Uso gap, margin o los dos?
- Usa gap. Solo pone espacio entre elementos, no en los bordes exteriores, y funciona en ambas direcciones (row-gap, column-gap) cuando pasas a wrap. El margin en los hijos es el viejo truco: añade espacio por todos los lados, incluidos los bordes exteriores, y hay que compensarlo con margin negativo en el padre. gap funciona en todos los navegadores publicados después de abril de 2021, lo que cubre todo lo que se usa hoy.
- ¿En qué se diferencia flexbox de CSS Grid?
- Flexbox es unidimensional: colocas los elementos en una fila o en una columna. Grid es bidimensional: defines filas y columnas y colocas los elementos en celdas. Regla práctica: barras de navegación, filas de botones, pilas verticales, barra lateral + contenido y cualquier caso en que los elementos deciden su propio tamaño = flexbox. Galerías de fotos, paneles, diseños tipo revista y cualquier cosa con pistas con nombre = grid. Se combinan: una celda de grid puede ser un contenedor flex.
- ¿Por qué un elemento crece y los demás no?
- Porque ese hijo tiene flex-grow con un número positivo. flex-grow le dice a un elemento cuánto del espacio sobrante debe ocupar: 0 significa "no crecer", 1 "ocupar una parte igual" y 2 "ocupar el doble que los de 1". Este generador se centra en las propiedades del contenedor; flex-grow, flex-shrink y flex-basis van en los hijos y se ajustan elemento por elemento en tu propio CSS.
- ¿Este CSS funcionará en navegadores antiguos?
- Sí en todo lo moderno. Flexbox funciona en todos los navegadores desde 2017 (Chrome, Firefox, Safari, Edge, móviles). La propiedad gap en contenedores flex es lo único más reciente: totalmente compatible desde abril de 2021. Si necesitas IE 11 o un navegador móvil de 2020, sustituye gap por margin en los hijos y evita space-evenly (usa space-around como casi equivalente).
- ¿Por qué mis elementos no se encogen más allá de su contenido?
- Cada elemento flex tiene un min-width: auto implícito, que es el tamaño de su contenido (la palabra más larga de un párrafo, el ancho intrínseco de una imagen). Eso se impone a flex-shrink. Añade min-width: 0 al hijo para que flex-shrink pueda encogerlo por debajo del tamaño de su contenido. Es la sorpresa más común de flexbox, y la solución es una línea.
