justify-self The attribute sets the horizontal position (left, center, right) of the cell content, which is justify-items exactly the same as the usage of the attribute, but only works on a single item.

align-self The attribute sets the vertical position (upper, middle, lower) of the cell content, which is align-itemsexactly the same as the usage of the attribute, and it only works on a single item.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Both properties can take the following four values.

• start: Aligns to the starting edge of the cell.
• end: Aligns to the end edge of the cell.
• center: The cell is centered inside.
• stretch: Stretch to fill the entire width of the cell (default value).

Below is justify-self: start the example.

.item-1  {
  justify-self: start;
}

place-self Property is a combined shorthand for align-self property and attribute.justify-self

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

Below is an example.

place-self: center center;

If the second value is omitted, the place-self attribute considers the two values ​​equal.