align-content

The align-content property aligns flex container's lines within the flex container when there is extra space.

Formal Syntax

align-content = normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> <baseline-position> = [ first | last ]? && baseline <content-distribution> = space-between | space-around | space-evenly | stretch <overflow-position> = unsafe | safe <content-position> = center | start | end | flex-start | flex-end

Initial value: normal
Applies to: block containers, multicol containers, flex containers, and grid containers
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Animation type: discrete

See specification

JavaScript Access

// Access via element.style element.style.alignContent = "normal";

Browser Support

standard | MDN · Spec · Spec

Feature	Chrome	Firefox	Safari	Edge
align-content	29	28	9	12
block_context	123	125	17.4	123
flex_context	21	28	9	12
grid_context	57	52	10.1	16
multicol_context	123	—	17.4	123
normal	29	28	9	12

Related Properties