CSS - place-self Property: A Beginner's Guide

Hello there, future CSS masters! Today, we're going to dive into the wonderful world of CSS and explore a nifty little property called place-self. Don't worry if you're new to this; I'll walk you through it step by step, just like I've done with my students for years. By the end of this tutorial, you'll be placing elements like a pro!

What is place-self?

Before we jump into the deep end, let's start with the basics. The place-self property is a shorthand for setting both the align-self and justify-self properties in a single declaration. It's like killing two birds with one stone, but much more humane and CSS-related!

Syntax

The syntax for place-self is quite simple:

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

If you provide only one value, it applies to both align-self and justify-self. It's like ordering a combo meal – you get two things for the price of one!

Possible Values

Now, let's look at the various values we can use with place-self. I'll present them in a table format, which I find helps students digest information more easily:

Value	Description
auto	The element inherits its parent container's align-self/justify-self behavior
normal	The element is positioned according to the normal flow of the document
start	Aligns the element to the start of the container
end	Aligns the element to the end of the container
center	Centers the element within its container
stretch	Stretches the element to fit the container
flex-start	Aligns the element to the start of the flex container
flex-end	Aligns the element to the end of the flex container
self-start	Aligns the element to the start of its own axis
self-end	Aligns the element to the end of its own axis
baseline	Aligns the element to the baseline of the container
first baseline	Aligns the element to the first baseline of the container
last baseline	Aligns the element to the last baseline of the container

Applies To

The place-self property applies to grid items and flex items. It's like a special power that only certain superheroes (or in our case, elements) possess!

Now, let's dive into some examples to see how these values work in practice.

CSS place-self - normal start Value

.item {
  place-self: normal start;
}

This declaration positions the element according to the normal flow for alignment and at the start of the container for justification. It's like telling your element, "Be normal, but start at the beginning!"

CSS place-self - auto center Value

.item {
  place-self: auto center;
}

Here, we're saying, "Inherit the alignment from your parent, but center yourself horizontally." It's perfect for when you want your element to go with the flow vertically but stand out horizontally.

CSS place-self - center normal Value

.item {
  place-self: center normal;
}

This centers the element vertically but keeps it in the normal flow horizontally. Imagine your element is at a party – it's right in the middle of the room but still following the usual party etiquette!

CSS place-self - end normal Value

.item {
  place-self: end normal;
}

This aligns the element to the end of its container vertically while keeping it in the normal flow horizontally. It's like your element is standing on its tiptoes at the back of a crowd!

CSS place-self - start auto Value

.item {
  place-self: start auto;
}

This positions the element at the start of its container vertically and inherits the horizontal alignment. It's saying, "I'll start at the top, but I'll go with the flow horizontally."

CSS place-self - self-start auto Value

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

This aligns the element to its own start edge vertically and inherits the horizontal alignment. It's like your element is saying, "I'll do my own thing vertically, but I'll follow the crowd horizontally."

CSS place-self - self-end normal Value

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

This aligns the element to its own end edge vertically and keeps it in the normal flow horizontally. It's as if your element is reaching for the sky with its feet firmly on the ground!

CSS place-self - flex-start auto Value

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

In a flex container, this aligns the element to the start of the container vertically and inherits the horizontal alignment. It's perfect for flex items that want to start at the top but go with the flex flow horizontally.

CSS place-self - flex-end normal Value

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

In a flex container, this aligns the element to the end of the container vertically and keeps it in the normal flow horizontally. It's like your flex item is doing a handstand!

CSS place-self - baseline normal Value

.item {
  place-self: baseline normal;
}

This aligns the element's baseline with the baseline of its container vertically and keeps it in the normal flow horizontally. It's great for keeping text aligned across different elements.

CSS place-self - last baseline normal Value

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

Similar to baseline, but it uses the last baseline if multiple baselines exist. It's like making sure your element has the last word!

CSS place-self - stretch auto Value

.item {
  place-self: stretch auto;
}

This stretches the element to fill its container vertically and inherits the horizontal alignment. It's like your element is saying, "I'll be as tall as I can be, but I'll go with the flow horizontally."

And there you have it, folks! We've explored the place-self property and its various values. Remember, the key to mastering CSS is practice. So go ahead, play around with these values, mix and match, and see what beautiful layouts you can create!

In my years of teaching, I've found that students who experiment and have fun with CSS tend to learn faster and retain more. So don't be afraid to get creative! Who knows? You might discover a combination that becomes your signature style.

Happy coding, and may your elements always be perfectly placed!

Credits: Image by storyset