align content

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS align-content Property

 

Example

Pack lines toward the center of the flex container:

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;

}

Definition and Usage

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

CSS Syntax

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Property Values

Value Description
stretch                Default value. Lines stretch to take up the remaining space
center                Lines are packed toward the center of the flex container
flex-start           Lines are packed toward the start of the flex container
flex-end            Lines are packed toward the end of the flex container
space-between Lines are evenly distributed in the flex container
space-around                   Lines are evenly distributed in the flex container, with half-size spaces on either end
initial                      Sets this property to its default value. Read about initial

inheritInherits this property from its parent element. Read about inherit