align-content

align-content

Remember we had flex-wrap where we allow flex items to wrap on separate lines. Well, with align-content we can control how those row of items are aligned on the cross axis. Since this is only for wrapped items, this property won't have any effect if you only have a singular line of flex items.

.parent {
  align-content: stretch /* default */
              or flex-start
              or flex-end
              or center
              or space-between
              or space-around
}

Align Content

The align-content property is used to align the flex lines.

• The space-between value displays the flex lines with equal space between them:

.flex-container { 
display: flex; 
height: 600px; 
flex-wrap: wrap; 
align-content: space-between; }

• The space-around value displays the flex lines with space before, between, and after them:

.flex-container {
 display: flex;
  height: 600px; 
  flex-wrap: wrap; 
  align-content: space-around; }

• The stretch value stretches the flex lines to take up the remaining space (this is default):

.flex-container { 
display: flex; 
height: 600px;
 flex-wrap: wrap; 
 align-content: stretch; }

• The center value displays display the flex lines in the middle of the container:

.flex-container { 
display: flex;
 height: 600px; 
 flex-wrap: wrap; 
 align-content: center; }

• The flex-start value displays the flex lines at the start of the container:

.flex-container { 
display: flex;
 height: 600px; 
 flex-wrap: wrap; 
 align-content: flex-start; }

• The flex-end value displays the flex lines at the end of the container

.flex-container {
 display: flex; 
 height: 600px; 
 flex-wrap: wrap;
  align-content: flex-end; }