CSS <content-distribution> Data Type

The CSS <content-distribution> data type represents keywords that distribute available space between and around alignment subjects. These values are used by CSS box alignment properties to control how groups of items are distributed within an alignment container.

Syntax

The <content-distribution> data type accepts three keyword values:

<content-distribution> = space-between | space-around | space-evenly | stretch

<content-distribution> Values

Value	Description
`space-between`	Distributes the alignment subjects evenly, placing the first subject at the start edge and the last subject at the end edge.
`space-around`	Distributes the alignment subjects evenly with equal space around each subject. The space at the outer edges is half the space between adjacent subjects.
`space-evenly`	Distributes the alignment subjects so the space between adjacent subjects and the space at both outer edges is equal.
`stretch`	Increases the size of eligible auto-sized alignment subjects equally so the group fills the alignment container.

How <content-distribution> Works

Content distribution occurs when an alignment container has available space after the sizes of its alignment subjects have been determined. The selected value controls how that remaining space is distributed among the subjects or around the group.

The effect depends on the alignment property, layout mode, alignment axis, and whether distributable space is available. For example, justify-content commonly distributes items along the main axis of a flex container, while align-content can distribute flex lines or grid tracks along the cross or block axis.

<content-distribution> Example

The following examples demonstrate three distribution values using justify-content in a flex container:

.between {
  justify-content: space-between;
}
.around {
  justify-content: space-around;
}
.evenly {
  justify-content: space-evenly;
}

Browser Result

space-between

1 2 3

space-around

1 2 3

space-evenly

1 2 3

The <content-distribution> data type is used by CSS box alignment properties, including:

Specifications

The <content-distribution> data type is defined in the CSS Box Alignment Module Level 3 .

CSS <content-distribution> Data Type