The CSS place-items property is the shorthand of align-items and justify-items property. The shorthand properties mean in CSS, that you can set the multiple properties values in a single property. So here the place-items property can hold the value of the align-items and justify-items property values.
place-items: align-items property value justify-items 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: If the items have no parents then this property is used that defines the absolute positioned.
- normal: This property dependent on the layout mode we are in.
- start: This property used to align flex items from the start of the container.
- end: This property used to align flex items from the end of the container.
- flex-start: This property displays the lines at the start of the flex container.
- flex-end: This property displays the flex lines at the end of the flex container.
- center: This property aligns flex items at the center of the container.
- self-start: This property will be packed flush to the edge of the alignment container of the start side of the item.
- self-end: This property will be packed flush to the edge of the alignment container of the end side of the item.
- space-evenly: This property defines that the positioned with equal spacing between them but the spacing from corners differ.
- stretch: This property defines that the line stretched to take the remaining space of the flex container. It is the default value.
Below examples illustrate the CSS place-items property:
Example 1: In this example, we will use star place-items: flex-start property value.
Example 2: Here we will use place-items: flex-end property value.
- CSS | transition-property Property
- How to override the CSS properties of a class using another CSS class ?
- CSS | table-layout Property
- CSS | text-align Property
- CSS | border-top-width Property
- CSS | isolation Property
- CSS | border-inline-start-style Property
- CSS | column-rule-width Property
- CSS | word-spacing Property
- CSS | animation-delay Property
- CSS | margin-top Property
- CSS | border radius property
- CSS | grid Property
- CSS | font-size-adjust Property
- CSS | visibility Property
- CSS | Display property
- CSS | grid-template-columns Property
- CSS | height Property
- CSS | transform-origin Property
- CSS | animation-name Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.