CSS align-content ominaisuus

Definition and usage

align-content attribute modification flex-wrap The behavior of the attribute. It is similar to align-items Similar, but it does not align the flexible items, but aligns the flexible lines.

Note:There must be multiple lines of items for this property to take effect!

Tip:Use justify-content The property can align items horizontally on the main-axis.

See also:

CSS Tutorial:CSS Flexbox

CSS Tutorial:CSS Grid

CSS Reference Manual:align-items attribute

CSS Reference Manual:align-self attribute

CSS Reference Manual:justify-content attribute

HTML DOM Reference Manual:alignContent attribute

Example

Pack the lines to the center of the flexible container:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Try it yourself

CSS syntax

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Attribute value

Value Description
stretch Default value. Lines stretch to occupy the remaining space.
center Pack the lines towards the center of the flexible container.
flex-start Pack the lines towards the beginning of the flexible container.
flex-end Pack the lines towards the end of the flexible container.
space-between Lines are evenly distributed in the flexible container.
space-around Lines are evenly distributed in the flexible container, with each end taking up half.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: stretch
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.alignContent="center"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0