Justify-content

• Расположение flex-child вдоль главной оси // действие блочной модели продолжается (margin/padding)

• 
  .flex-parent {
    display: flex;
    justify-content: flex-start;
  }
         

• flex-start

  1

  2

  3

  4

  5

  6

• flex-end

  1

  2

  3

  4

  5

  6

• space-between

  1

  2

  3

  4

  5

  6

• space-around

  1

  2

  3

  4

  5

  6

• space-evenly

  1

  2

  3

  4

  5

  6

• center

  1

  2

  3

  4

  5

  6
• Марджины суммируются (в т.ч. и по вертикали)
• margin: auto; дейстует по ширине и высоте одинаково - центрирует

• 
  .flex-child {
    margin: 5px;
  }        

• 1

  2

  3

  4

  5

  6
• 1

  2

  3

  4

  5

  6