CSS: Fundamentos de Flex

Teoría: Propiedades de los elementos Flex. Posicionamiento


Cuando trabajamos con Flexbox, no solo podemos distribuir los elementos de forma flexible dentro de un contenedor, sino que también podemos controlar su orden y alineación individual.

En esta lección, exploraremos dos propiedades clave que nos permiten hacer esto:

  • order: Permite cambiar la posición de un elemento dentro de un contenedor flexible sin modificar el HTML.
  • align-self: Permite alinear cada elemento de forma independiente dentro de su contenedor flex.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Notarás que los elementos tienen alturas diferentes para facilitar la visualización de su comportamiento.

Cambiar el orden de los elementos con order

Por defecto, los elementos en un contenedor flex se muestran en el orden en el que aparecen en el HTML. Sin embargo, con la propiedad order, podemos cambiar su posición fácilmente.

¿Cómo funciona?

.item {
  order: 2; /* Mientras mayor sea el número, más adelante estará en el contenedor */
}

Por defecto, todos los elementos Flex tienen order: 0. Podemos asignar valores positivos o negativos para reorganizarlos.

En el siguiente ejemplo, cambiamos el orden del primer y tercer elemento:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

También podemos usar valores negativos para mover un elemento antes que los demás:

.item-special {
  order: -1; /* Se moverá al inicio */
}

Casos importantes a considerar:

  • Los elementos sin order siguen el flujo natural del HTML.
  • Los números más bajos aparecen antes en el contenedor.
  • Los valores negativos colocan el elemento antes de los que tienen order: 0 (el valor predeterminado).

Mira este ejemplo donde solo algunos elementos tienen un valor de order:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Alinear elementos individualmente con align-self

A veces, necesitamos alinear un solo elemento en un contenedor sin afectar a los demás. Para esto usamos align-self, que es similar a align-items pero funciona solo en un elemento específico.

Valores principales de align-self:

ValorDescripción
flex-startAlinea el elemento al inicio del eje transversal.
centerAlinea el elemento al centro del eje transversal.
flex-endAlinea el elemento al final del eje transversal.
baselineAlinea el elemento con la línea base del contenido.

Ejemplo

En el siguiente ejemplo, aplicamos diferentes valores de align-self a los elementos:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Podemos modificar la alineación como en el siguiente código:

.item {
  align-self: center; /* Se posiciona en el centro del eje transversal */
}

Prueba cambiar los valores en el CodePen para ver cómo afecta a cada bloque.

Resumen

  • La propiedad order cambia la posición de los elementos dentro del contenedor flex, usando valores positivos y negativos.
  • Si un elemento tiene order: -1, aparece antes que los elementos con el valor predeterminado (0).
  • La propiedad align-self permite modificar la alineación de un solo elemento dentro del contenedor sin afectar a los demás.
  • Los valores más usados en align-self son flex-start, center, flex-end y baseline.
NavegaciónTeoría

Completado

0 / 10