CSS align-content property

CSS align-content property

CSS align-content, is used in flexbox containers to align its lines, if there is an extra white-space.

It is used to define how a browser distributes space between and around content items.

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

To support align-content 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-content property values

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

  • stretch
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

stretch value for css align-content property

It is the default value, it is used to auto fill the space available in the container by increasing the size of the lines.

Example

Try Yourself

flex-start value for css align-content property

Lines are moved to the starting position in the container.

Example

Try Yourself

flex-end value for css align-content property

Lines are moved to the ending position in the container.

Example

Try Yourself

center value for css align-content property

It is used to join together the lines and move it to the center of the container.

Example

Try Yourself

space-between value for css align-content property

It is used to evenly align between the lines and the container.

Example

Try Yourself

space-around value for css align-content property

It is used to distribute space evenly between the lines and the container.

Example

Try Yourself