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:
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: