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
ordersiguen 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:
| Valor | Descripción |
|---|---|
flex-start |
Alinea el elemento al inicio del eje transversal. |
center |
Alinea el elemento al centro del eje transversal. |
flex-end |
Alinea el elemento al final del eje transversal. |
baseline |
Alinea 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
ordercambia la posición de los elementos dentro del contenedorflex, usando valores positivos y negativos. - Si un elemento tiene
order: -1, aparece antes que los elementos con el valor predeterminado (0). - La propiedad
align-selfpermite modificar la alineación de un solo elemento dentro del contenedor sin afectar a los demás. - Los valores más usados en
align-selfsonflex-start,center,flex-endybaseline.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
