Using Flexbox, how do you distribute items equally inside a container?

To distribute items equally on a line, set styles to justify-content: space-around or justify-content: space-between on the flex container.

To distribute items equally in the column, set styles justify-content: space-around or justify-content: space-between on the flex container. This would however display the items on a line. To display them in a column, you need to change the flex item flow direction to column. In order to do that, set styles flex-direction: column on the flex container.

CSS - Horizontal direction

div {
  display: flex;
  justify-content: space-around;
}

CSS - Vertical direction

div {
  display: flex;
  justify-direction: column;
  justify-content: spacing-around;
}