htmlにcssでjustify-content="center"とするのに、左寄りになってしまうことについて

htmlにcssでjustify-content="center"とするのに、左寄りになってしまいます。
どこがおかしいのでしょう。
justify-content="center"の代わりに、margin:auto;を入力すると中央寄りになります。
さっぱりわからず、悩んでいます。
お手数ですが、お助けいただけたら幸いです。

コード
```<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>CSSレイアウト</title>
    <meta name="description" content="CSSレイアウトのページです">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <main>
      <nav></nav>
      <article></article>
      <aside></aside>
    </main>
  </body>
</html>

~以下にcss~
main{
  display:flex;
  max-width:1080px;
  margin-top:100px;
  justify-content: center;
  height:200px;
  column-gap:20px;
}

nav{
  width:calc(1040px / 3);
  background:#ffe966;
}

article{
  width:calc(1040px / 3);
  background:#72e8a7;
}

aside{
  width:calc(1040px / 3);
  background:#84ceef;
}

回答2件

ベストアンサー

まず、下記の用語を理解してください。

フレックスコンテナ:　display: flex;を設定した要素
フレックスアイテム:　フレックスコンテナの子要素
FlexBoxレイアウト:　フレックスコンテナ内でのフレックスアイテムの位置関係を設定する機能

よってjustify-content: center;はフレックスコンテナ内でのフレックスアイテムを中央配置にするということです。
フレックスコンテナはmax-width:1080px;が設定されているので、画面幅がそれより大きくなっても幅は1080pxのままです。その場合、デフォルトでは左寄せになります。
つまり、フレックスコンテナ自体が左寄せになっていて、そのフレックスコンテナ内でフレックスアイテムは中央寄せになってます。ただし、1040px / 3 幅なので、３つでフレックスコンテナの幅になってますので余白はないので意味はないですが。

margin: auto;は余白を均等に左右に分割するので、フレックスコンテナ(main)自体が画面に対して中央配置になります。その中のフレックスアイテムも当然中央配置になります。

max-width:1080px;を消すとフレックスコンテナが画面幅に広がりますので、justify-content: center;によりフレックスアイテムはフレックスコンテナ内で中央寄せになります。フレックスコンテナ幅と画面幅が同じ状態なので、画面に対しても中央寄せに見えます。

言葉だけでは伝わりにくいかも知れませんので、画像にしてみました。
フレックスコンテナの境界線を赤にしていますので、それとフレックスアイテムの位置関係をみてください。

イメージ説明