place-self | CSS-Tricks

CSS Almanac → Properties → P → place-self

Marcel Rojas on Mar 2, 2021 (Updated on Mar 4, 2021)

The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions.

.element {
  place-self: center start;
}

The property is included in the CSS Box Alignment Module Level 3 specification, where it is called the “self-aligmentshorthand.” That’s a great nickname for it because it indeed does allow an element to align itself distinctly from the alignment of its parent and other elements in a group, and does it by combining two properties together in a single declaration.

Syntax

place-self: <'align-self'> <'justify-self'>?

Initial value: auto
Applies to: block-level boxes, absolutely-positioned boxes, and grid items.
Inherited: no
Computed value: As each of the properties of the shorthand: align-self and justify-self
Animation type: discrete

Values

/* Keyword values */
place-self: auto center;
place-self: normal start;

/* Positional alignment */
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;

/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Global values */
place-self: inherit;
place-self: initial;
place-self: unset;

Keyword values

auto: This returns the value provided by the justify-items property in the parent container. If the element does not have a parent container, then normal is returned instead..
normal: This way this value behaves depends on the current layout mode:
- In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes. In all other absolutely-positioned boxes, it acts like the stretch value.
- In a static position of absolutely-positioned layouts, the keyword behaves like the stretch value.
- For flex items, the keyword behaves as stretch.
- For grid items, this keyword leads to a behavior that’s similar to stretch, except for boxes with an aspect ratio or an intrinsic sizes— it behaves like start in those cases.
- The property doesn’t apply at all to block-level boxes or table cells.

Positional alignment

self-start: This aligns the element with the starting edge of the container.
self-end: This aligns the element with the ending edge of the container.
flex-start: This is used in a flex layout, where the element is flushed to the container’s starting edge
flex-end: This is used in a flex layout, where the element is flushed to the container’s ending edge
center: This centers the element within its container.
left: This flushes the element to the container’s left edge.
right: This flushes the element to the container’s right edge.

Baseline alignment

baseline: This aligns the element within a group (i.e. cells within a row) by matching up its alignment baseline with the baselines of the group. Defaults to first if baseline is used on its own.
first baseline: This aligns the alignment baseline of the box’s first baseline set with the corresponding baseline in the shared first baseline set of all the boxes in its baseline-sharing group. Fallnack alignment is start.
last baseline: This aligns the alignment baseline of the box’s last baseline set with the corresponding baseline in the shared last baseline set of all the boxes in its baseline-sharing group. Fallback alignment is end.
stretch: Used to stretch an item on both axes, while still respecting the constraints imposed by the max-height and max-width properties (or equivalent functionality).

Two properties, one declaration

That’s what shorthand properties in CSS are so good at. Instead of writing out align-self and justify-self like this:

.item {
  display: grid;
  align-self: start;
  justify-self: center;
}

…we can simply declare place-self which takes both of those values:

.item {
  display: grid;
  place-self: start center;
}

If only one value is provided, then it sets both properties. For example, this:

.item {
  display: grid;
  place-self: start;
}

Is the same as writing this:

.item {
  display: grid;
  align-self: start;
  justify-self: start;
}

There is no `justify-self` in flexbox

Flexbox ignores the justify-self property because the justify-content property already controls how that extra space is used. In other words, a flex container already calculates how much space is needed to lay out its items. Any extra space that’s leftover once the items have been placed is handled by justify-content. And since justify-self works on the individual items of a flex container, there’s really no need for it — the justify-content property working on the flex container already has it covered.

In other words, justify-self is a no-go when we’re dealing with flexbox. Yeah, it’s a little weird, but also one of those things you just gotta know going into flexbox.

Now, whether we’re talking about the block or inline direction is purely based on the direction, writing-mode and text-orientation of the element. If it’s left-to-right, like English, them we’re talking about the block (vertical) direction. If it’s vertical, then we’re dealing with the inline (horizontal) direction. Chris explains Logical Properties in greater detail and is worth checking out for more information.

Examples

Our target is in a grid layout and places itself at the baseline in the block (vertical) direction, and center in the inline (horizontal) direction:

In this example, our target is in a grid layout and places itself at the end (flex-end) of the container in the block (vertical) direction and the start (flex-start) of the container in the inline (horizontal) direction:

Now, let’s have the target place itself at the start (flex-start) of the container in the block (vertical) direction and the end (flex-end) in the inline (horizontal) direction: