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:
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...