ここで「justify-content: space-between;」を指定する理由を教えてください

前提・実現したいこと

今回はエラーが発生しているというわけではないですが、この「justify-content: space-between;」がなくても変わらないような気がして、なぜ指定しているのかという疑問についてご教授頂きたいです。
確か両端寄せに用いられる指示だったと記憶しています。その要素の範囲いっぱい（今回ならstudy-list）にバランスよく広げるという意味でつかわれているならわからなくもないですが、それならこの指示をしなかった場合でも変化がないことに疑問があります。

該当のソースコード

HTML
1<!DOCTYPE>
2<html>
3
4
5<head>
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width,initial-scale=1">
8 <link rel="stylesheet" href="css/reset.css">
9 <link rel="stylesheet" href="css/style.css">
10 <link rel="stylesheet" href="css/responsive.css">
11 <title>はじめてのコーディング　テイク6</title>
12</head>
13<header class="header-top">
14 <h1>はじめてのコーディング</h1>
15</header>
16<main>
17 <div class="main-visial">
18  <div class="kv-copy">
19   <h1>コーディングを学習して、<br>
20    オリジナルサイトを作成しよう</h1>
21  </div>
22 </div>
23 <section class="section-title">
24  <h2>はじめに</h2>
25  <div class="section-text">
26   <p>このサイトは、コーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイトを「使える状態」にすることです。</p>
27  </div>
28 </section>
29
30 <section class="section-title bg-gray">
31  <div class="section-title ">
32   <h2>学習の心構え</h2>
33  </div>
34  <ul>
35   <li class="atitude-item">暗記しようとしない</li>
36   <li class="atitude-item">反復練習する</li>
37   <li class="atitude-item">習得するまでコピペ禁止</li>
38   <li class="atitude-item">1回で理解できなくても気にしない</li>
39  </ul>
40 </section>
41
42 <section>
43  <h2 class="section-title">学習すること</h2>
44
45  <ul class="study-list">
46   <li class="study-list-item">
47    <img src="../images/images/icon_html.jpg">
48    <p>HTML5</p>
49   </li>
50   <li class="study-list-item">
51    <img src="../images/images/icon_css.jpg">
52    <p>CSS3</p>
53   </li>
54   <li class="study-list-item">
55    <img src="../images/images/icon_js.jpg">
56    <p>JavaScript</p>
57   </li>
58  </ul>
59
60  <a class="btn" href="#">Webサイトを見る</a>
61
62 </section>
63
64 <footer>
65  <p>©2020 cresta.design</p>
66 </footer>
67</main>
68
69</html>
70

該当のソースコード

css
1@charset "utf-8";
2/*忘れ*/
3
4@import "va";
5
6
7
8/*共通レイアウト*/
9html {
10 text-align: center;
11 font-size: 16px;
12 line-height: 1.5;
13 font-family: "Helvetica", "YuGothic";
14}
15
16section {
17 padding: 80px 0;
18}
19
20h2 {
21 font-size: 30px;
22 color: $orange;
23 padding-bottom: 50px;
24
25}
26
27img {
28 width: 100%;
29 vertical-align: bottom;
30}
31
32
33/*はじめてのコーディング*/
34.header-top {
35 background-color: $orange;
36
37 h1 {
38  color: $white;
39  padding: 20px;
40  font-size: 40px;
41
42 }
43}
44
45/*キャッチコピー*/
46.main-visial {
47 background-image: url(..//images/kv-img.jpg);
48 background-position: center;
49 background-size: cover;
50 padding: 155px 0;
51
52 .kv-copy {
53  color: $white;
54  font-size: 30px;
55  line-height: 45px;
56 }
57}
58
59
60/*はじめに*/
61
62.section-text {
63 line-height: 24px;
64 max-width: 800px;
65 margin: auto;
66 /*要素全体を真ん中寄*/
67
68 /*padding: 0 320px;*/
69 p {
70  padding: 0 20px;
71  margin: auto 50px;
72  text-align: left;
73  /*なかのテキストのみ左寄*/
74 }
75}
76
77/*学習の心構え*/
78
79.bg-gray {
80 background-color: $gray;
81
82 ul {
83  li {
84   padding-bottom: 15px;
85  }
86
87  li:last-of-type {
88   padding-bottom: 15px;
89  }
90 }
91}
92
93/*学習すること*/
94
95.study-list {
96 display: flex;
97 max-width: 800px;
98 /*範囲が真ん中800pxに絞られる*/
99 justify-content: space-between;
100 margin: 0 auto 50px;
101 /*ボタン下間隔*/
102
103 .study-list-item {
104  padding: 0 20px;
105  /*.つけ忘れ注意*/
106  text-align: left;
107  font-weight: bold;
108 }
109}
110
111
112
113
114
115/*ボタン*/
116.btn {
117 background-color: $orange;
118 color: $white;
119 padding: 12px 40px;
120 text-decoration: none;
121}
122
123
124
125
126/*フッター*/
127footer {
128 background-color: $black;
129 color: $white;
130 padding: 15px;
131}
132

試したこと

・検証ツールやコメントアウトを用いて「justify-content: space-between;」の指示をした場合と、しない場合で見比べてみる。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

Lhankor_Mhy

2021/01/22 08:59 編集

justify-content: space-between; を削除したところ、変化がありました。当方では画像が再現できませんので、画像の大きさによるのかもしれませんね。

mitrasi

2021/01/22 09:04

ご回答ありがとうございます！画像の大きさなのでしょうか。。ちなみに差し支えなければどのぐらいのサイズの画像を見たときに変化があったかなど詳しくお聞かせ願えませんでしょうか？

Lhankor_Mhy

2021/01/22 09:35

リンク切れのままにしています。

mitrasi

2021/01/22 09:49

というと…どういう意味でしょうか？こちらの理解力不足で申し訳ないです???? あと、こちらにご報告いただいているということは、現段階の情報提供ではなにか不備がございますでしょうか？なにかあれば教えていただけると助かります。

Lhankor_Mhy

2021/01/22 09:54

ご提示のコードをそのまま試すと、画像が存在していませんから、画像が表示されないと思います。その状態です。不備というか、問題が再現しませんでしたので…… この状態で回答するのであれば、「レイアウトが変わるので必要です」となるのですが、これはご希望の回答ではないのではありませんか？

Lhankor_Mhy

2021/01/22 09:59

あ、もしかして、「フレックスコンテナ一杯にアイテムが詰まっている状態であれば、justify-content: space-between があろうとなかろうと関係ないはずなのに、どうしてわざわざ記述してあるのか？」というご質問なのですか？つまり、「みっしり詰めてあるのだから別に書かなくてもいいのでは？」という疑問でしょうか？

mitrasi

2021/01/22 09:59

なるほどですね！画像を勝手にご提供してよいものかわかりかねますので申し訳ないです???? 確かにそうですね、Lhankor_Mhyさんがそうおっしゃるのなら間違いないと思いますが、どこがどう変わるかなどやはり確認しないと少しもやもやしてしまいますね… なにか代替できる画像がないか探してみますので少々お待ちいただけますでしょうか？

mitrasi

2021/01/22 10:15

ごめんなさい…そもそも見た目に変化がないのでどこに影響しているのかっていう時点からわかっておりません（苦笑）質問に書いてあるのは、あくまで検証ツールで見る限り”そのあたり”なのかな？どうなの？そうだとしたら（以後はおっしゃられてる通り）です。つまり、「フレックスコンテナなら意味がないはずなのにどうして？」というよりは、「そもそもフレックスコンテナにきかせているのか？どこにきいているのかわからないから必要性がわからない」という感じです。

mitrasi

2021/01/22 10:22

ごめんなさい…画像の用意は少し時間かかるのでできなさそうです???? もうちょっと考えてみます

Lhankor_Mhy

2021/01/23 01:18

画像は不要です。画像のサイズがわかればレイアウトは再現できます。

mitrasi

2021/01/24 23:38

お返事遅れてすみません???? 縦横496pxの正方形です（ちなみにコードにもありますがmax-widthは800）

行動規範の内容に同意します

回答2件

ベストアンサー

justifyプロパティは、フレックスアイテムが配置されて余ったスペースの配分方法を指定します。
ですので、スペースが余らない場合には、何を指定しても変わりません。

ご提示のコードは、.study-listにmax-width: 800pxが設定されています。ここに幅が496pxの画像が3枚配置されるのですから、スペースは余りません。
ですので、justify-content: space-betweenを指定しなくても別に構わないと思いますが、何らかの事情で画像が読み込めなかったり、ユーザーエージェントが画像を読み込まないものであった場合はレイアウトが崩れることになります。

投稿2021/01/25 02:48

編集2021/01/25 02:49

Lhankor_Mhy

総合スコア36928