CSS align-self property

CSS align-self property

CSS align-self, is used in flexbox containers to align an individual flex item.

It is used to align the flex items of the current flex line overriding the align-items value.

It can be only used if the container has more than one line, if only one line is present no effects will occur.

To support align-self property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

CSS align-self property values

align-self can have different values, but we will see the commonly used values.

  • auto
  • stretch
  • flex-start
  • flex-end
  • center

auto value for css align-self property

It inherits the property of the parent container. If the property is not given, it take "stretch" as the default value.

Example

Try Yourself

stretch value for css align-self property

It is used to auto fill the space available, to fit the flex item in the container.

Example

Try Yourself

flex-start value for css align-self property

Flex item is moved to the starting position in the container.

Example

Try Yourself

flex-end value for css align-self property

Flex item is moved to the ending position in the container.

Example

Try Yourself

center value for css align-self property

Flex item is moved to the center of the container.

Example

Try Yourself