What is a difference between display: flex and display: inline-flex?

The style display: flex will make the element a flex box container.

The style display: inline-flex will make the element a flex box container and the container will be in-line. Note that this won't make the flex items in-line. The style is applied on the container!

CSS

.container {
  display: flex;
}

.container2 {
  display: inline-flex;
}

CSS - Vertical direction

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