<content-distribution>
The <content-distribution>
enumerated value type is used by justify-content
and align-content
properties, and the place-content
shorthand, to distribute a container's extra space among its alignment subjects.
Syntax
<content-distribution> = space-between | space-around | space-evenly | stretch
Values
The following keyword values are represented by the <content-distribution>
grammar term:
space-between
-
Evenly distributes the alignment subject within the alignment container. The first item is placed flush with the start edge of the alignment container, the last item subject is placed flush with the end edge of the alignment container, and the remaining items are evenly distributed so that the spacing between any two adjacent items is the same. The default fallback alignment for
space-between
issafe flex-start
for flex layout, andstart
otherwise. If there is only one item, the item will be flush with the start edge. space-around
-
The items are evenly distributed in the container, with a half-size space on either end. The spacing between any two adjacent items is the same, and the spacing before the first and after the last items is half the size of the other spacing. The default fallback alignment for
space-around
issafe center
. If the container has only one child, the item will be centered. space-evenly
-
The items are evenly distributed in the container, with a full-size space on either end. The spacing between any two adjacent items, before the first item, and after the last item, are all the same. The default fallback alignment for
space-evenly
issafe center
. If the container has only one child, the item will be centered. stretch
-
If the combined size of the items is less than the size of the container, any items that can grow will have their size increased equally (not proportionally), while still respecting the constraints imposed by
max-height
,max-width
, or equivalent functionality, so that the combined size of the items exactly fills the container. The default fallback alignment forstretch
isflex-start
in flexbox, andstart
in other layout modes. If there is only one item, and that item can grow, it will grow to fill the container.
Specifications
No specification found
No specification data found for css.types.content-distribution
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for css.types.content-distribution
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.
See also
- Properties that use this data type:
align-content
,justify-content
,place-content
- Other box alignment data types:
<baseline-position>
,<content-position>
,<overflow-position>
, and<self-position>
- CSS box alignment module
- CSS flexible box layout module
- CSS grid layout module