description & Usage
The align-self property determines an alignment and direction for the items inside a block that are in the flex-box or grid.
For pages with English language, the tsar and direction of the block is down and the direction of the items is from left to right.
Informations
| # | Description |
|---|---|
| Default Value | auto |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.alignSelf="center" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the align-self property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-self |
Syntax
Values
| Values | Description |
|---|---|
| auto | It causes the align-item property to use the properties of its parent tag. |
| stretch | It causes the parent tag to be placed in an elongated box. |
| center | It causes the parent tag to be placed at the center of the box. |
| flex-start | It causes the parent tag to be placed at the start of the box. |
| flex-end | It causes the parent tag to be placed at the end of the box. |
| baseline | It causes the parent tag to be placed from the baseline of the box. |
| initial | Adds the corresponding property to its default settings. |
| inherit | It inherits the corresponding property from its parent. |
Related Pages
CSS Tutorial: CSS grid
CSS Tutorial: CSS flexbox
CSS Reference: align-content property
CSS Reference: align-items property
CSS Reference: justify-self property
HTML DOM reference: alignSelf property
