description & Usage
The align-item property provides default alignment and orientation for information inside a flexbox.
In a flexbox, information is set to vertical by default.
In a grid container, information is arranged in a specified direction for blocks.
To optimally use the align-item property, there must be enough space for items and information to create their own direction without problems (not to go out of the box).
Informations
| # | Description |
|---|---|
| Default Value | normal |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.alignItems="center" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the align-items property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-items |
Syntax
Values
| Values | Description |
|---|---|
| normal | By default, it starts working for all values related to the align-items property. |
| stretch | It applies the information in a stretched manner according to the container. |
| center | It places the information in the middle according to the space of the container. |
| flex-start | It applies the information according to the container space in the starting section of the box. |
| flex-end | It applies the information according to the container space in the end section of the box. |
| start | It causes information and items to be applied in their own sections from the start section of the blocks. |
| end | It causes the information and items to be applied in their own sections of the end of the blocks. |
| basekline | It applies the information according to the box space in the baseline of the box. |
| intial | Adds the corresponding property and value to its default settings. |
| inherit | An attribute inherits the corresponding property and value from its parent tag. |
Related Pages
CSS tutorial: CSS grid
CSS tutorial: CSS flexbox
CSS Reference: align-content property
CSS Reference: align-self property
CSS Reference: justify-content property
CSS Reference: justify-items propertyط
CSS Reference: justify-self property
HTML DOM reference: alignItems property
