Para comprender cómo funciona Flexbox, es fundamental familiarizarse con algunos conceptos y terminología clave. Flexbox introduce varios términos y propiedades específicas que te permitirán controlar la disposición de los elementos de manera más precisa.

Terminología Clave

1. Contenedor Flex (Flex Container): El componente padre que tiene display: flex; o display: inline-flex;. Este contenedor establece el contexto Flex para sus hijos.

2. Elementos Flex (Flex Items): Los hijos directos del contenedor Flex. Estos elementos son los que se disponen usando las propiedades de Flexbox.

3. Eje Principal (Main Axis): El eje principal en el cual los elementos Flex se colocan. Por defecto, este eje es horizontal (de izquierda a derecha).

4. Eje Cruzado (Cross Axis): El eje perpendicular al eje principal. Por defecto, este eje es vertical (de arriba hacia abajo).

5. Inicio del Contenido (Main Start) y Fin del Contenido (Main End): Las posiciones inicial y final del eje principal.

6. Inicio Cruzado (Cross Start) y Fin Cruzado (Cross End): Las posiciones inicial y final del eje cruzado.

Propiedades Fundamentales

Propiedades del Contenedor Flex

1. display: Define un contenedor flex. Puede ser flex o inline-flex.

   css
   

2. flex-direction: Establece la dirección del eje principal (por defecto, row).

   css
   

3. flex-wrap: Decide si los elementos flex deben envolver cuando no caben en una sola línea.

   css
   

4. flex-flow: Es una abreviatura para las propiedades flex-direction y flex-wrap.

   css
   

5. justify-content: Alinea los elementos a lo largo del eje principal.

   css
   

6. align-items: Alinea los elementos a lo largo del eje cruzado.

   css
   

7. align-content: Alínea las líneas del eje cruzado cuando hay espacio extra.

   css
   

Propiedades de los Elementos Flex

1. order: Modifica el orden de los elementos dentro del contenedor.

   css
   

2. flex-grow: Define la capacidad de un elemento para crecer si es necesario.

   css
   

3. flex-shrink: Define la capacidad de un elemento para encogerse si es necesario.

   css
   

4. flex-basis: La base flexible de un elemento antes de que se distribuyan los espacios restantes.

   css
   

5. flex: Abreviatura para flex-grow, flex-shrink y flex-basis.

   css
   

6. align-self: Permite modificar la alineación de un único elemento a lo largo del eje cruzado, sobrescribiendo align-items.

   css
   

Imágenes Explicativas

1. [Placeholder: Imagen que muestra un contenedor con display: flex; y varios elementos flex dispuestos en una fila horizontal.]
2. [Placeholder: Diagrama que ilustra los conceptos de eje principal y eje cruzado, junto con inicio y fin del contenido (main start, main end) y cruzado (cross start, cross end).]

Estos conceptos son fundamentales para aprovechar al máximo las capacidades de Flexbox. En los siguientes capítulos, profundizaremos en cada una de estas propiedades y su uso en diversos escenarios.