Skip to content
Related Articles

Related Articles

Improve Article
CSS place-self Property
  • Last Updated : 13 Aug, 2020

The CSS place-self property is the shorthand of align-self and justify-self property. A shorthand property in CSS means you can set the multiple properties values in a single property. Here the place-self property can hold the value of the align-self and justify-self property.

Syntax:

place-self: align-self-property-value justify-self-property-value

Property Values: This property accepts all the possible combination values that can make by the align-items and justify-items property values.

  • auto: This property is used if the items have no parent. This property is then used to define the absolute position of the items.
  • normal: This property depends on the current layout mode.
  • start: This property is used to align flex items from the start of the container.
  • end: This property is used to align flex items from the end of the container.
  • flex-start: This property is used to display the lines at the start of the flex container.
  • flex-end: This property is used to display the flex lines at the end of the flex container.
  • center: This property is used to align flex items to the center of the container.
  • self-start: This property is used to pack items flush to the alignment container with the start side of the item.
  • self-end: This property is used to pack items flush to the alignment container with the end side of the item.
  • space-evenly: This property defines the position with equal spacing between them but the spacing from corners differs.
  • stretch: This property defines the line stretched to take the remaining space of the flex container. It is the default value.

Below examples illustrate the CSS place-self property:

Example 1:



HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS place-self Property</title>
    <style>
        h1 {
            color: green;
        }
  
        article {
            background-color: black;
            display: grid;
            grid-auto-rows: 40px;
            grid-gap: 5px;
            width: 200px;
        }
  
        /* Using different values
    with the place-self property */
        span:nth-child(2) {
            place-self: start center;
        }
  
        span:nth-child(3) {
            place-self: center start;
        }
  
        article span {
            background-color: orange;
            color: white;
            margin: 1px;
            text-align: center;
        }
  
        article,
        span {
            padding: 6px;
            border-radius: 5px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>CSS place-self Property</b>
        <article class="container">
            <span>HTML</span>
            <span>CSS</span>
            <span>Bootstrap</span>
            <span>JavaScript</span>
        </article>
    </center>
</body>
  
</html>

Output:
place-self-ex1

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS place-self Property</title>
    <style>
        h1 {
            color: green;
        }
  
        article {
            background-color: black;
            display: grid;
            grid-auto-rows: 40px;
            grid-gap: 5px;
            width: 200px;
        }
  
        /* Using different values
        with the place-self property */
        span:nth-child(2) {
            place-self: self-start;
        }
  
        span:nth-child(3) {
            place-self: self-end;
        }
  
        article span {
            background-color: orange;
            color: white;
            margin: 1px;
            text-align: center;
        }
  
        article,
        span {
            padding: 6px;
            border-radius: 5px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>CSS place-self Property</b>
        <article class="container">
            <span>HTML</span>
            <span>CSS</span>
            <span>Bootstrap</span>
            <span>JavaScript</span>
        </article>
    </center>
</body>
  
</html>


Output:
place-self-ex2




My Personal Notes arrow_drop_up
Recommended Articles
Page :