CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-colorclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumnscolumn-spancolumn-widthcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowsheightimage-renderingjustify-contentleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-modemask-originmask-positionmask-repeatmask-sizemax-heightmax-widthmin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS align-content property


The align-content CSS property aligns the flexible container's items within the flex container when there is extra space on the cross-axis (vertically).

It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

This property has no effect on single line flexible boxes.

Moreover you can use the CSS justify-content property to align the items on the main-axis (horizontally).

Values

This is the value you will use with align-content property

ValueDescription
centerItems are positioned at the center of the flex container.
flex-startItems are positioned at the beginning of the flex container.
flex-endItems are positioned at the end of the flex container.
space-betweenItems are evenly distributed in the flex container in such a way that the space between two adjacent items is same.
space-aroundItems are evenly distributed in the flex container so that the spaces around (i.e. before, between, and after) every item are same.
space-evenlyLines are evenly distributed in the flex container, with equal space around them
stretchItems are stretched to fit the flex container. The free-space is divided equally between all the items. This is default value.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Example


* {
   
align-content
stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial
}

References