CSS place-self

The place-self property in CSS allows you to align a flex item inside a flex container both horizontally and vertically. It is a shorthand property for the align-self and justify-self properties combined.

The place-self property takes two values: the first value is for vertical alignment and the second value is for horizontal alignment. These values can be any of the following:

Examples

Result: 

    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      border: 1px solid #333;
    }

    .flex-item {
      width: 100px;
      height: 100px;
      background-color: #f0f0f0;
      border: 1px solid #999;
      place-self: center start;
    }
Example

In this example, the flex item is aligned to the center horizontally and to the start vertically within the flex container.

Result: 

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      justify-content: center;
      align-items: center;
      height: 200px;
      border: 1px solid #333;
    }

    .grid-item {
      width: 100px;
      height: 100px;
      background-color: #f0f0f0;
      border: 1px solid #999;
      place-self: end stretch;
    }
Example
Example
Example

In this example, the grid items are aligned to the end horizontally and stretched vertically within the grid container.