Rows

justify-content: flex-start (default)

Working on Main Axis Alignment

For row, main axis is x-axis

CSS

.container {
  display: flex;
  justify-content: flex-start;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: flex-end

CSS

.container {
  display: flex;
  justify-content: flex-end;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: center

CSS

.container {
  display: flex;
  justify-content: center;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: space-around

CSS

.container {
  display: flex;
  justify-content: space-around;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: space-evenly

CSS

.container {
  display: flex;
  justify-content: space-evenly;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: space-between

CSS

.container {
  display: flex;
  justify-content: space-between;
}

Box-1

Box-2

Box-3

Box-4

Box-5

Columns

justify-content: flex-start (default)

Working on Main Axis Alignment

For row, main axis is y-axis

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: flex-start;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: flex-end

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: flex-end;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: center

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: center;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: space-around

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: space-around;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: space-evenly

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: space-evenly;
}

Box-1

Box-2

Box-3

Box-4

Box-5

justify-content: space-between

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: space-between;
}

Box-1

Box-2

Box-3

Box-4

Box-5