回答編集履歴
2
説明画像を追加
test
CHANGED
|
@@ -12,3 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
`max-width:1080px;`を消すとフレックスコンテナが画面幅に広がりますので、`justify-content: center;`によりフレックスアイテムはフレックスコンテナ内で中央寄せになります。フレックスコンテナ幅と画面幅が同じ状態なので、画面に対しても中央寄せに見えます。
|
|
14
14
|
|
|
15
|
+
言葉だけでは伝わりにくいかも知れませんので、画像にしてみました。
|
|
16
|
+
フレックスコンテナの境界線を赤にしていますので、それとフレックスアイテムの位置関係をみてください。
|
|
17
|
+
|
|
18
|
+
|
1
説明追記
test
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
まず、下記の用語を理解してください。
|
|
2
|
+
|
|
2
3
|
**フレックスコンテナ:** `display: flex;`を設定した要素
|
|
3
4
|
**フレックスアイテム:** フレックスコンテナの子要素
|
|
4
5
|
**FlexBoxレイアウト:** フレックスコンテナ内でのフレックスアイテムの位置関係を設定する機能
|
|
@@ -7,6 +8,7 @@
|
|
|
7
8
|
フレックスコンテナは`max-width:1080px;`が設定されているので、画面幅がそれより大きくなっても幅は1080pxのままです。その場合、デフォルトでは左寄せになります。
|
|
8
9
|
つまり、フレックスコンテナ自体が左寄せになっていて、そのフレックスコンテナ内でフレックスアイテムは中央寄せになってます。ただし、1040px / 3 幅なので、３つでフレックスコンテナの幅になってますので余白はないので意味はないですが。
|
|
9
10
|
|
|
10
|
-
`margin: auto;`は余白を均等に左右
|
|
11
|
+
`margin: auto;`は余白を均等に左右に分割するので、フレックスコンテナ(`main`)自体が画面に対して中央配置になります。その中のフレックスアイテムも当然中央配置になります。
|
|
11
12
|
|
|
13
|
+
`max-width:1080px;`を消すとフレックスコンテナが画面幅に広がりますので、`justify-content: center;`によりフレックスアイテムはフレックスコンテナ内で中央寄せになります。フレックスコンテナ幅と画面幅が同じ状態なので、画面に対しても中央寄せに見えます。
|
|
12
14
|
|