CSS Master

Figure 4.47. Eliminating space between rows of flex items using align-content: center

Wecanusealign-content: centerwithalign-items: center,orbyitself.The

CSSthatfollowswillalsocreatethelayoutshowninFigure4.47:

.flex-container {

display: flex;

align-content: center;

}

Thealign-contentpropertyonlyhasaneffect,however,whentherearemutiple

rowsofflexitems.Otherwise,align-itemsissufficient.

Vertical Centering with Box Alignment

It'sworthnotingthattheBoxAlignmentmodule^22 ,currentlyinworkingdraft,

shouldbringverticalcenteringtoalllayoutmethods,includingblock.

(^22) http://www.w3.org/TR/css-align-3/
186 CSS Master