¿Cuáles son las propiedades fundamentales de un contenedor Flexbox?

Las propiedades fundamentales que aplicas a un contenedor para definir cómo se comportarán sus hijos (los elementos flexibles) en un contexto Flexbox son varias. Las más cruciales incluyen:

1. display: flex; (o inline-flex;): Es la propiedad que habilita el contexto Flexbox. Al declararla en un elemento, sus hijos directos se convierten en elementos flexibles.
   .mi-contenedor {
display: flex;
}
2. flex-direction: Define la dirección del eje principal del contenedor, es decir, si los elementos se dispondrán en fila o en columna. Sus valores comunes son row (por defecto, horizontal), column (vertical), row-reverse y column-reverse.
3. flex-wrap: Controla si los elementos flexibles deben permanecer en una sola línea o pueden fluir en múltiples líneas si no caben. Los valores principales son nowrap (por defecto, no permite el salto de línea), wrap (permite el salto a múltiples líneas) y wrap-reverse.
4. justify-content: Alinea los elementos flexibles a lo largo del eje principal del contenedor. Ayuda a distribuir el espacio sobrante. Valores comunes son flex-start, flex-end, center, space-between, space-around y space-evenly.
5. align-items: Alinea los elementos flexibles a lo largo del eje transversal (perpendicular al eje principal). Valores típicos son stretch (por defecto, estira los ítems), flex-start, flex-end, center y baseline.
6. align-content: Modifica el comportamiento de align-items cuando hay múltiples líneas de elementos flexibles (es decir, cuando flex-wrap es wrap o wrap-reverse y hay espacio extra en el eje transversal). Alinea las líneas completas de elementos dentro del contenedor. Valores similares a justify-content como flex-start, center, space-between, etc.
7. gap (o row-gap y column-gap): Permite definir el espacio (canalones o «gutters») entre los elementos flexibles, tanto horizontal como verticalmente, de una manera más sencilla que usando márgenes.