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.
flex-start value for css align-content property
Lines are moved to the starting position in the container.
flex-end value for css align-content property
Lines are moved to the ending position in the container.
center value for css align-content property
It is used to join together the lines and move it to the center of the container.
space-between value for css align-content property
It is used to evenly align between the lines and the container.
space-around value for css align-content property
It is used to distribute space evenly between the lines and the container.