CSS align-items property

CSS align-items property

CSS align-items, is used in flexbox containers to align the flex items, if there is an extra white-space.

It is used to define how the browser distributes space between and around flex items.

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


CSS align-items property values

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

  • stretch : It is the default value, it is used to auto fill the space available in the container by increasing the size of the items which has auto-size property.
  • start : It is used to join together the elements and move it to the starting position of the container. It cant be used in flex container.
  • end : It is used to join together the elements and move it to the ending position container.
  • flex-start : It works similar to the start, but it can be used only in flex containers.
  • flex-end : It works similar to the end, but it can be used only in flex containers.
  • center : It is used to join together the elements and move it to the center of the container.

To support align-items 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.

Example

Try Yourself