Concepto de Flexbox

El modelo de diseño Flexible Box (Flexbox) proporciona un método eficiente para alinear y distribuir espacio antre elementos dentro de un contenedor. Para activar este modelo, se aplica la propiedad display: flex al elemento contenedor. Los elementos en línea pueden usar display: inline-flex. Una vez establecido, las propiedades como float, clear y vertical-align de los elementos hijos pierden efecto.

Estructura del Modelo Flexbox

El elemento que declara display: flex se denomina contenedor flex, y sus hijos directos se convierten en ítemss flex. Este contenedor define dos ejes: el eje principal (main axis), que determina la dirección de los ítems, y el eje transversal (cross axis), perpendicular al principal.

Propiedades del Contenedor

flex-direction

Controla la orientación del eje principal y, por tanto, la secuencia de los ítems dentro del contenedor.

.contenedor {
  flex-direction: row; /* Valor por defecto: ítems en fila de izquierda a derecha */
  flex-direction: row-reverse; /* Ítems en fila de derecha a izquierda */
  flex-direction: column; /* Ítems en columna de arriba hacia abajo */
  flex-direction: column-reverse; /* Ítems en columna de abajo hacia arriba */
}

flex-wrap

Determnia si los ítems deben ajustarse en una sola línea o envolverse en múltiples líneas cuando el espacio es limitado.

.contenedor {
  flex-wrap: nowrap; /* Por defecto: todos los ítems en una línea */
  flex-wrap: wrap; /* Los ítems se envuelven, la primera línea en la parte superior */
  flex-wrap: wrap-reverse; /* Los ítems se envuelven, la primera línea en la parte inferior */
}

justify-content

Alinea los ítems a lo largo del eje principal, gestionando el espacio disponible entre ellos.

.contenedor {
  justify-content: flex-start; /* Alineación al inicio del eje principal */
  justify-content: flex-end; /* Alineación al final del eje principal */
  justify-content: center; /* Centrado en el eje principal */
  justify-content: space-between; /* Espacio uniforme entre ítems, bordes pegados */
  justify-content: space-around; /* Espacio igual alrededor de cada ítem */
}

align-items

Alinea los ítems en el eje transversal, definiendo su comportamiento perpendicular al flujo principal.

.contenedor {
  align-items: flex-start; /* Alineación al inicio del eje transversal */
  align-items: flex-end; /* Alineación al final del eje transversal */
  align-items: center; /* Centrado en el eje transversal */
  align-items: baseline; /* Alineación según la línea base del texto */
  align-items: stretch; /* Por defecto: los ítems se estiran para llenar el contenedor */
}

align-self

Permite que un ítem flex individual anule la alineación definida por align-items en el contenedor, aplicándose directamente al ítem.

.item {
  align-self: auto; /* Hereda la configuración del contenedor */
  align-self: flex-start; /* Alineación personalizada al inicio del eje transversal */
  align-self: flex-end; /* Alineación personalizada al final del eje transversal */
  align-self: center; /* Centrado personalizado en el eje transversal */
  align-self: baseline; /* Alineación personalizada según la línea base */
  align-self: stretch; /* Estiramiento personalizado */
}