align-content: stretch;

Aligns a flex containers lines within when there is extra space in the cross-axis

 

.container {

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

}

 

 

  • flex-start: lines packed to the start of the container
  • flex-end: lines packed to the end of the container
  • center: lines packed to the center of the container
  • space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
  • space-around: lines evenly distributed with equal space around each line
  • stretch (default): lines stretch to take up the remaining space

Leave a Reply

Your email address will not be published. Required fields are marked *