Answers for "space content equally in flex box"

css flex divide evenly

flex: 1 1 0px

css flex wrap space between rows

/* To adjust the space between rows that are wrapped, use 'align-content' */

.my-element {
  align-content: stretch; /* Makes all contents in each row grow to fill up the entire space of the container, leaving no spacing at all */
  align-content: flex-start; /* Leaves no space between rows, and pushes all the spacing to the bottom of the container */
  align-content: center; /* Leaves no space between rows and pushes all the spacing equally to the top and bottom of the container */
  align-content: flex-end; /* Leaves no space between rows, and pushes all the spacing to the top of the container */
  align-content: space-between; /* Puts space in between rows, leaving no space at the top of the first row or at the bottom of the last row */
  align-content: space-around; /* Puts equal spacing at the top/bottom of each row, making adjacent rows seem as though they have more spacing than the single rows */
  align-content: space-evenly; /* Puts equal spacing between and around each row */
}