Flexbox

flex-direction

Define la dirección del eje principal.

.container {
  flex-direction: row;            /* Por defecto: izquierda a derecha */
  flex-direction: row-reverse;    /* Derecha a izquierda */
  flex-direction: column;         /* Arriba a abajo */
  flex-direction: column-reverse; /* Abajo a arriba */
}

justify-content (Eje Principal)

Alinea items a lo largo del eje principal.

.container {
  justify-content: flex-start;    /* Inicio (por defecto) */
  justify-content: flex-end;      /* Final */
  justify-content: center;        /* Centro */
  justify-content: space-between; /* Espacio entre items */
  justify-content: space-around;  /* Espacio igual alrededor */
  justify-content: space-evenly;  /* Espacio igual entre todos */
}

align-items (Eje Transversal)

Alinea items a lo largo del eje transversal.

.container {
  align-items: stretch;     /* Estirar para llenar (por defecto) */
  align-items: flex-start;  /* Inicio del eje transversal */
  align-items: flex-end;    /* Final del eje transversal */
  align-items: center;      /* Centro del eje transversal */
  align-items: baseline;    /* Alinear líneas base de texto */
}

flex-wrap

Controla si los items se envuelven a nuevas líneas.

.container {
  flex-wrap: nowrap;       /* Una línea (por defecto) */
  flex-wrap: wrap;         /* Envolver a múltiples líneas */
  flex-wrap: wrap-reverse; /* Envolver en reversa */
}

gap

Agrega espacio entre items flex.

.container {
  gap: 20px;          /* Fila y columna */
  gap: 20px 10px;     /* Fila | Columna */
  row-gap: 20px;      /* Solo filas */
  column-gap: 10px;   /* Solo columnas */
}

flex-grow

Cuánto puede crecer un item para llenar espacio disponible.

.item {
  flex-grow: 0;  /* No crecer (por defecto) */
  flex-grow: 1;  /* Crecer para llenar espacio */
  flex-grow: 2;  /* Crecer el doble que flex-grow: 1 */
}

flex-shrink

Cuánto puede encogerse un item si es necesario.

.item {
  flex-shrink: 1;  /* Puede encogerse (por defecto) */
  flex-shrink: 0;  /* No encogerse */
  flex-shrink: 2;  /* Encogerse el doble que flex-shrink: 1 */
}

flex-basis

Tamaño inicial antes de que se distribuya el espacio.

.item {
  flex-basis: auto;   /* Usar width/height del item */
  flex-basis: 200px;  /* Tamaño inicial fijo */
  flex-basis: 25%;    /* Porcentaje del contenedor */
  flex-basis: 0;      /* Ignorar tamaño del contenido */
}

Atajo flex

.item {
  flex: 1;           /* flex-grow: 1, shrink: 1, basis: 0% */
  flex: 0 0 200px;   /* No crecer, no encogerse, 200px de ancho */
  flex: 1 1 auto;    /* Crecer y encogerse, tamaño auto */
}

align-self

Sobrescribe align-items para un item específico.

.item {
  align-self: auto;       /* Usar align-items del contenedor */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
}