左右要素は両端寄せ・中央要素を親に対して左右中央寄せ

左右のボタンのwidthの影響を受けずに親に対して左右中央寄せする実装方法に少し迷ったのでメモ。

結論

See the Pen Center alignment with parents by Yuya Sasaki (@Yuya-SSK) on CodePen.

ポイントは以下。

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  &__left-area {
    display: flex;
    justify-content: flex-start;
  }

  &__center-area {
    display: flex;
    justify-content: center;
  }

  &__right-area {
    display: flex;
    justify-content: flex-end;
  }

それぞれのボタンを内包する３つの領域を作り、grid-template-columnsで均等配置。
各領域に対して個別に寄せ設定。