CSS place-self Property

❮ Previous Reference Next ❯

Example

#demo {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
}

#demo div {
  flex: 1;
}

#myDiv {
  place-self: center;
}
Try this code ❯

Meaning:

The place-self CSS property align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.

The place-self property is a shorthand for the following CSS properties:

Default value:auto auto
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.placeSelf="normal | stretch | baseline-position | [ overflow-position ? self-position]|initial|inherit|revert|revert-layer|unset";


Standard Syntax

place-self: normal | stretch | baseline-position | [ overflow-position ? self-position]|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
auto This is default value. The element takes the computed value of its parent element align-items property or stretch if it has no parent.
normal Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below.
baseline Items are positioned at the baseline of the flex container.

Possible Values:

  • baseline
  • first baseline
  • last baseline
center The element is positioned at the center of the flex container.
stretch The element is stretched to fit the flex container.
flex-end The element is positioned at the end of the flex container.
flex-start The element is positioned at the beginning of the flex container.
start The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
self-start The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
self-end The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
safe Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
unsafe Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  place-self: auto auto;
}
❮ Previous Reference Next ❯