CSS place-self Property
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 >w3wiki</ 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 >w3wiki</ 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:
Contact Us