¿Qué es Flexbox?

Flexbox (Modelo de Caja Flexible) es un modelo de diseño unidimensional en CSS, destinado a distribuir espacio entre elementos en un contenedor y ofrecer potentes capacidades de alineación. Permite gestionar fácilmente tamaños, orden y alineación de los elementos hijos (elementos flex) dentro del contenedor padre (contenedor flex), independientemente de su orden o tamaño original.

Conceptos clave de Flexbox:

• Contenedor flex: Elemento con display: flex o display: inline-flex. Es en este contenedor donde se definen las reglas de diseño para sus elementos hijos directos.
• Elementos flex: Elementos hijos directos del contenedor flex. Se les aplican propiedades de Flexbox que determinan su comportamiento dentro del contenedor.
• Eje principal (main axis): Eje a lo largo del cual se colocan los elementos flex. Por defecto es horizontal (de izquierda a derecha), pero puede cambiarse con flex-direction.
• Eje transversal (cross axis): Eje perpendicular al eje principal.
• Inicio principal (main start) / Fin principal (main end): Inicio y fin a lo largo del eje principal.
• Inicio transversal (cross start) / Fin transversal (cross end): Inicio y fin a lo largo del eje transversal.

Propiedades principales de Flexbox para el contenedor flex:

• display: Define que el elemento es un contenedor flex (flex o inline-flex).
• flex-direction: Define la dirección del eje principal (row, row-reverse, column, column-reverse).
• flex-wrap: Define si los elementos flex se envuelven en una nueva línea/columna si no hay suficiente espacio (nowrap, wrap, wrap-reverse).
• justify-content: Alinea los elementos flex a lo largo del eje principal (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Alinea los elementos flex a lo largo del eje transversal (flex-start, flex-end, center, baseline, stretch).
• align-content: Alinea las líneas de elementos flex (si hay varias por flex-wrap) a lo largo del eje transversal.

Propiedades principales de Flexbox para los elementos flex:

• order: Define el orden de visualización del elemento flex (por defecto 0).
• flex-grow: Coeficiente de crecimiento del elemento flex, que determina cuánto puede crecer para llenar el espacio disponible.
• flex-shrink: Coeficiente de encogimiento del elemento flex, que determina cuánto puede reducirse para evitar desbordamiento.
• flex-basis: Tamaño inicial del elemento flex antes de distribuir el espacio libre.
• flex: Abreviatura de flex-grow, flex-shrink y flex-basis.
• align-self: Sobrescribe align-items para un elemento flex específico.

Ejemplo de uso:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Convertimos el contenedor en flex */
  justify-content: center; /* Alineamos los elementos al centro del eje principal */
  align-items: center; /* Alineamos los elementos al centro del eje transversal */
  height: 200px; /* Para demostrar la alineación */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Ventajas principales de Flexbox:

• Alineación sencilla de elementos en horizontal y vertical.
• Distribución flexible del espacio entre elementos.
• Cambio fácil del orden de los elementos.
• Diseño adaptable sin usar float ni position.
• Buen soporte en navegadores modernos.