行揃えを調整する

justify-contentプロパティを使えば行揃えを変更できる

.flex-left {
  display: flex;
  justify-content: left;
}
Item1
Item2
Item3
.flex-center {
  display: flex;
  justify-content: center;
}
Item1
Item2
Item3
.flex-right {
  display: flex;
  justify-content: right;
}
Item1
Item2
Item3
.flex-around {
  display: flex;
  justify-content: space-around;
}
Item1
Item2
Item3
.flex-between {
  display: flex;
  justify-content: space-between;
}
Item1
Item2
Item3
.flex-evenly {
  display: flex;
  justify-content: space-evenly;
}
Item1
Item2
Item3

margin-right: auto; / margin-left: auto;

1つ目のフレックスアイテムに margin-right: auto; を設定すると、2つ目のフレックスアイテムとの間にスペースが空く

.flex-margin_right {
  display: flex;

  .item-left {
    margin-right: auto;
  }
}
.margin-right
Item2
Item3

3つ目のフレックスアイテムに margin-left: auto; を設定すると、2つ目のフレックスアイテムとの間にスペースが空く

.flex-margin_left {
  display: flex;

  .margin-left {
    margin-left: auto;
  }
}
Item1
Item2
.margin-left