CSS align-content Property
Description
The align-content
property determines how the browser distributes the space between and around the flex elements along the transverse axis of the container (vertically), or aligns the entire grid layout along the axis of the grid container column. In order to determine how the browser distributes the space between and around the flex elements along the main axis of the container (horizontally), or aligns the entire grid layout along the axis of the row of the grid container, you can use the justify-content property
- Initial value
- stretch
- Applies to
- Multi-line flex containers
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.alignContent
Syntax
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
Values
- flex-startLines inside the container are located at the beginning of the transverse axis of the flex container, or the initial edge of the grid of the grid container. For layout grid elements (grid elements) the abbreviated start value is allowed, for flex elements it is necessary to use the full flex-start value.
- flex-endLines inside the container are located at the end of the transverse axis of the flex container, or along the edge of the grid of the grid container. For layout grid elements (grid elements), the abbreviated end value is allowed; for flex elements, the full flex-end value must be used.
- centerLines inside the container are located in its center.
- space-betweenThe lines inside the container are evenly distributed, with the first line being positioned at the beginning of the transverse axis, and the last line being positioned from the end of the transverse axis.
- space-aroundLines inside the container are evenly distributed, while the space between two adjacent lines is the same, and the empty space before the first line and after the last line is half of the space between adjacent lines.
- space-evenlyPlaces an even space between each line, including the top and bottom edges of the container.
- stretchThe lines inside the container stretch evenly, filling the free space (resizes the grid elements, or flex elements so that the elements fill the entire height of the container). This is the default value.
Example
<body>
<div class="grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class="grid-container2"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class="grid-container3"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class="grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class="grid-container5"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class="grid-container6"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
</body>
body {
display: flex;
flex-wrap: wrap;
}
.grid-container,
.grid-container2,
.grid-container3,
.grid-container4,
.grid-container5,
.grid-container6 {
display: inline-grid;
grid: auto / repeat(4, 1fr);
height: 120px;
width: 30%;
background: rgb(0,150,208);
margin: 10px;
text-align: center;
}
div>div {
background: rgb(241,101,41);
border: 1px solid;
}
.grid-container {
align-content: stretch;
}
.grid-container2 {
align-content: start;
}
.grid-container3 {
align-content: end;
}
.grid-container4 {
align-content: center;
}
.grid-container5 {
align-content: space-between;
}
.grid-container6 {
align-content: space-around;
}
Browser Support
Desktop | |||||
11 | 12 | 29 | 28 | 12.1 | 9 |
Tablets / Mobile | |||||
![]() |
|||||
4.4 | 29 | 28 | 12.1 | 9.2 | Yes |
Last updated by CSSPortal on: 5th November 2019
CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-path
- color
- column-count
- column-fill
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index