CSS - Propriedad place-self: Una Guía para Principiantes

¡Hola a todos, futuros maestros de CSS! Hoy vamos a sumergirnos en el maravilloso mundo de CSS y explorar una pequeña pero útil propiedad llamada place-self. No te preocupes si eres nuevo en esto; te guiaré paso a paso, tal como he hecho con mis estudiantes durante años. Al final de este tutorial, colocarás elementos como un profesional.

¿Qué es place-self?

Antes de sumergirnos de lleno, comencemos con lo básico. La propiedad place-self es un atajo para establecer tanto align-self como justify-self en una sola declaración. Es como matar dos pájaros con una piedra, pero mucho más humano y relacionado con CSS.

Sintaxis

La sintaxis para place-self es bastante simple:

place-self: <align-self> <justify-self>;

Si proporcionas solo un valor, se aplica a ambos align-self y justify-self. Es como ordenar un combo meal, ¡obtienes dos cosas por el precio de una!

Valores Posibles

Veamos los diversos valores que podemos usar con place-self. Los presentaré en un formato de tabla, que encuentro ayuda a los estudiantes a digerir la información más fácilmente:

Valor	Descripción
auto	El elemento hereda el comportamiento de align-self/justify-self de su contenedor padre
normal	El elemento se posiciona según el flujo normal del documento
start	Alinea el elemento al principio del contenedor
end	Alinea el elemento al final del contenedor
center	Centra el elemento dentro de su contenedor
stretch	Estira el elemento para que ajuste al contenedor
flex-start	Alinea el elemento al principio del contenedor flexible
flex-end	Alinea el elemento al final del contenedor flexible
self-start	Alinea el elemento al principio de su propio eje
self-end	Alinea el elemento al final de su propio eje
baseline	Alinea el elemento a la línea base del contenedor
first baseline	Alinea el elemento a la primera línea base del contenedor
last baseline	Alinea el elemento a la última línea base del contenedor

Aplicación

La propiedad place-self se aplica a elementos de rejilla y elementos flexibles. Es como un superpoder que solo poseen ciertos superhéroes (o en nuestro caso, elementos).

Ahora, veamos algunos ejemplos para ver cómo funcionan estos valores en la práctica.

CSS place-self - normal start Valor

.item {
place-self: normal start;
}

Esta declaración posiciona el elemento según el flujo normal para la alineación y al principio del contenedor para la justificación. Es como decirle a tu elemento: "Sé normal, pero comienza al principio".

CSS place-self - auto center Valor

.item {
place-self: auto center;
}

Aquí, estamos diciendo: "Hereda la alineación de tu padre, pero center yourself horizontalmente". Es perfecto para cuando quieres que tu elemento vaya con el flujo verticalmente pero resalte horizontalmente.

CSS place-self - center normal Valor

.item {
place-self: center normal;
}

Esto centra el elemento verticalmente pero lo mantiene en el flujo normal horizontalmente. Imagina que tu elemento está en una fiesta, ¡está en el centro de la habitación pero sigue las reglas de la fiesta!

CSS place-self - end normal Valor

.item {
place-self: end normal;
}

Esto alinea el elemento al final de su contenedor verticalmente y lo mantiene en el flujo normal horizontalmente. Es como si tu elemento estuviera parado en puntillas al final de una multitud.

CSS place-self - start auto Valor

.item {
place-self: start auto;
}

Este posiciona el elemento al principio de su contenedor verticalmente y hereda la alineación horizontal. Dice: "Comenzaré en la parte superior, pero iré con el flujo horizontalmente".

CSS place-self - self-start auto Valor

.item {
place-self: self-start auto;
}

Esto alinea el elemento al principio de su propio borde verticalmente y hereda la alineación horizontal. Es como si tu elemento estuviera diciendo: "Haré mi propia cosa verticalmente, pero seguiré la multitud horizontalmente".

CSS place-self - self-end normal Valor

.item {
place-self: self-end normal;
}

Esto alinea el elemento al final de su propio borde verticalmente y lo mantiene en el flujo normal horizontalmente. Es como si tu elemento estuviera alcanzando el cielo con los pies firmemente en el suelo.

CSS place-self - flex-start auto Valor

.item {
place-self: flex-start auto;
}

En un contenedor flexible, esto alinea el elemento al principio del contenedor verticalmente y hereda la alineación horizontal. Es perfecto para elementos flexibles que quieren comenzar en la parte superior pero seguir el flujo flexible horizontalmente.

CSS place-self - flex-end normal Valor

.item {
place-self: flex-end normal;
}

En un contenedor flexible, esto alinea el elemento al final del contenedor verticalmente y lo mantiene en el flujo normal horizontalmente. Es como si tu elemento estuviera haciendo una voltereta.

CSS place-self - baseline normal Valor

.item {
place-self: baseline normal;
}

Esto alinea la línea base del elemento con la línea base del contenedor verticalmente y lo mantiene en el flujo normal horizontalmente. Es genial para mantener el texto alineado entre diferentes elementos.

CSS place-self - last baseline normal Valor

.item {
place-self: last baseline normal;
}

Similar a baseline, pero usa la última línea base si existen múltiples líneas base. Es como asegurarse de que tu elemento tenga la última palabra.

CSS place-self - stretch auto Valor

.item {
place-self: stretch auto;
}

Esto estira el elemento para que llene su contenedor verticalmente y hereda la alineación horizontal. Es como si tu elemento dijera: "Seré tan alto como pueda, pero iré con el flujo horizontalmente".

Y ahí lo tienes, amigos. Hemos explorado la propiedad place-self y sus diversos valores. Recuerda, la clave para dominar CSS es la práctica. Así que adelante, juega con estos valores, mézclalos y combina, ¡y verás qué hermosos layouts puedes crear!

En mis años de enseñanza, he descubierto que los estudiantes que experimentan y se divierten con CSS tienden a aprender más rápido y retener más. Así que no tengas miedo de ser creativo. ¿Quién sabe? Podrías descubrir una combinación que se convierta en tu estilo firma.

¡Feliz codificación, y que tus elementos siempre estén perfectamente colocados!

Credits: Image by storyset