Search within TutorialsPark

CSS3 align-self Property


To override align-items for individual flex items.


Definition and Notes.

1. The CSS3 align-self property is used to align flex items of the current line, it overrides the values set by the align-items property.

2. No effect will be created if there is only a single row or column.This property is similar to the justify-content.


Syntax:

CSS3 align-self property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-Even if there is one item with flex-grow value other than 0, no properties will be applied, as no empty space would be available

Property Values

Value Description
flex-start Flex Items are laid towards the start of the main axis.Its the default
flex-end Flex Items are laid towards the end of the main axis
center Flex items are laid in the center of the container
baseline Flex items are evenly laid out on the Main axis, with first and last item against the edge
stretch Flex items are evenly laid out on the main axis, with half-size spaces at each end of the axis
auto It inherits the value of the parent's align-items property.Its the default value.

Specifications

Specs Value
Name align-self
Value flex-start | flex-end | center | baseline | stretch | auto
Initial Value auto
Applies to flex-containers
Javascript syntax object.style.alignSelf="center"
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.