justify-content: space-between;が効かない

前提・実現したいこと

お世話になっております。

cssで教えてください。

idで↓記述していますが、flexは効きますが、justify-contentが効きません。
pickup {
display: flex;
justify-content: space-between;

補足情報

どういった原因が考えられますでしょうか。
ネットを検索しますと、marginと一緒だと崩れる、とありますが、
元のソースも同じ記載となっております。

ご教示いただけますと幸いです。

html
1<!DOCTYPE html>
2<html lang="jp">
3  <head>
4    <meta charset="utf-8">
5    <title>Travel Blog</title>
6    <meta name="description" content="旅するブロガー">
7
8<!---レスポン--->
9<meta name="viewport" content="width=device-width,initial-scale=1">
10
11
12
13<link rel ="preconnect" href = "https://fonts.gstatic.com" crossorigin>
14<link href ="https：//fonts.googleapis.com/css2？family = M + PLUS + Rounded + 1c：wght @ 700＆ display = swap "rel =" stylesheet ">
15<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
16<link rel="stylesheet" href="css/style.css" >
17<link rel="stylesheet" href="css/responsive.css" >
18<link rel="icon" type="image/png" href="img/favicon.ico">
19</head>
20
21  <body>
22    <header id="header">
23      <h1 class="section-title wrapper">
24        <a href="travelblog.html"><img src="img/logo.svg" alt="Travel Blog"></a></h1>
25      <nav id="main-nav">
26        <ul class="wrapper">
27          <li>NEW</li>
28          <li>COLUMN</li>
29          <li>SERIES</li>
30          <li>Q&A</li>
31          <li>CONTACT</li>
32        </ul>
33      </nav>
34    </header>
35
36      <div id="pickup" class="wrapper">
37        <article>
38          <img src="img/pickup1.jpg" alt="1">
39          <h2>タイトル　テキストテキストテキストテキストテキストテキストテキスト</h2>
40          <div class="readmore">
41            <a href="#">READ MORE</a>
42          </div>
43        </article>
44        <article>
45          <img src="img/pickup2.jpg" alt="1">
46          <h2>タイトル　テキストテキストテキストテキストテキストテキストテキスト</h2>
47          <div class="readmore">
48            <a href="#">READ MORE</a>
49          </div>
50        </article>
51        <article>
52          <img src="img/pickup3.jpg" alt="1">
53          <h2>タイトル　テキストテキストテキストテキストテキストテキストテキスト</h2>
54          <div class="readmore">
55            <a href="#">READ MORE</a>
56          </div>
57          </article>
58        </div>
59
60      <div id="container" class="wrapper">
61
62      <main>
63        <article>
64          <h2 class="article-title">タイトル：テキストテキストテキストテキストテキスト</h2>
65          <ul>
66            <li>2020/01/01</li>
67            <li>カテゴリ１</li>
68          </ul>
69          <a href="#">
70            <img src="img/main1.jpg" alt="1">
71          </a>
72          <p>本文：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
73          </p>
74          <div class="readmore">
75            <a href="#">READ MORE</a>
76          </div>
77        </article>
78
79        <article>
80          <h2 class="article-title">タイトル：テキストテキストテキストテキストテキスト</h2>
81          <ul>
82            <li>2020/01/01</li>
83            <li>カテゴリ１</li>
84          </ul>
85          <a href="#">
86            <img src="img/main2.jpg" alt="1">
87          </a>
88          <p>本文：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
89          </p>
90          <div class="readmore">
91            <a href="#">READ MORE</a>
92          </div>
93        </article>
94
95
96        <article id="article-main">
97          <h2 class="article-title">タイトル：テキストテキストテキストテキストテキスト</h2>
98          <ul>
99            <li>2020/01/01</li>
100            <li>カテゴリ１</li>
101          </ul>
102          <a href="#">
103            <img src="img/main3.jpg" alt="1">
104          </a>
105          <p>本文：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
106          </p>
107          <div class="readmore">
108            <a href="#">READ MORE</a>
109          </div>
110
111        </article>
112        </main>
113
114        <aside id="aside">
115          <section class="section-author">
116              <a href="#">
117                <img src="img/author.jpg" alt="author">
118              </a>
119              <h3 class="authorname">NAME NAME</h3>
120              <p class="prf">プロフィール：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
121          </section>
122
123          <section class="ranking">
124            <h3>Ranking</h3>
125            <article>
126              <a href="#">
127                <img src="img/ranking1.jpg" alt="1">
128              </a>
129              <h4>タイトル：テキストテキストテキストテキストテキストテキストテキストテキスト</h4>
130            </article>
131
132            <article>
133              <a href="#">
134                <img src="img/ranking2.jpg" alt="1">
135              </a>
136              <h4>タイトル：テキストテキストテキストテキストテキストテキストテキストテキスト</h4>
137            </article>
138
139            <article>
140              <a href="#">
141                <img src="img/ranking3.jpg" alt="1">
142              </a>
143              <h4>タイトル：テキストテキストテキストテキストテキストテキストテキストテキスト</h4>
144            </article>
145          </section>
146
147
148      <section class="archive">
149      <h3 class="archive">Archive</h3>
150      <ul>
151        <li>
152          <a href="#">××××年××月（××）</a>
153        </li>
154        <li>
155          <a href="#">××××年××月（××）</a>
156        </li>
157        <li>
158          <a href="#">××××年××月（××）</a>
159        </li>
160        <li>
161          <a href="#">××××年××月（××）</a>
162        </li>
163        <li>
164          <a href="#">××××年××月（××）</a>
165        </li>
166        <li>
167          <a href="#">××××年××月（××）</a>
168        </li>
169        <li>
170          <a href="#">××××年××月（××）</a>
171        </li>
172        <li>
173          <a href="#">××××年××月（××）</a>
174        </li>
175        <li>
176          <a href="#">××××年××月（××）</a>
177        </li>
178        <li>
179          <a href="#">××××年××月（××）</a>
180        </li>
181        <li>
182          <a href="#">××××年××月（××）</a>
183        </li>
184        </ul>
185      </section>
186    </aside>
187  </div>
188
189<footer id="footer">
190<div class="content wrapper">
191<section class="item">
192<h3>About</h3>
193<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
194  <br>
195  ▶︎プロフィール詳細<br>
196  ▶︎お仕事の依頼<br>
197  ▶︎お問い合わせ<br>
198</p>
199</section>
200
201<section class="item">
202<h3>Menu</h3>
203<ul>
204  <li><a href="#">NEW</a></li>
205  <li><a href="#">CATEGORY</a></li>
206  <li><a href="#">COLUMN</a></li>
207  <li><a href="#">SERIES</a></li>
208  <li><a href="#">Q&A</a></li>
209</ul>
210</section>
211
212<section class="item">
213<h3>Twitter</h3>
214</section>
215
216
217
218</div>
219
220
221
222</footer>
223
224
225
226  </body>
227</html>
228

css
1@charset "UTF-8";
2
3html {
4  font-size: 100%;
5}
6body {
7  color: #333;
8  font-size: 1rem;
9  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
10}
11a {
12  color: #333;
13  text-decoration: none;
14}
15img {
16  max-width: 100%;
17}
18li {
19  list-style: none;
20}
21/*
22コンテンツ幅を設定するための共通クラス
23*/
24.wrapper {
25  max-width: 1200px;
26  padding: 0 16px;
27  margin: 0 auto;
28}
29.readmore {
30  font-size: 0.875rem;
31  text-align: center;
32  text-decoration: underline;
33}
34
35
36.section-title {
37  padding: 20px 16px;
38  line-height: 1px;
39}
40
41#main-nav{
42  background-color: #333;
43}
44
45#main-nav ul {
46  display: flex;
47  justify-content: flex-start;
48  align-items: center;
49
50}
51
52#pickup {
53  display: flex;
54  justify-content: space-between;
55  padding: 50px 16px 0 16px;
56  margin-bottom: 60px;
57}
58
59#pickup h2 {
60  font-size: 16px;
61  padding: 10px 0 10px 0;
62}
63
64
65
66nav li {
67  list-style: none;
68  padding: 10px 60px 10px 0;
69  color: #fff;
70  font-size: 14px;
71}
72
73
74
75#container {
76  display: flex;
77  justify-content: space-between;
78  margin-bottom: 60px;
79}
80
81main {
82  width: 65%;
83}
84
85#aside {
86  width: 30%;
87}
88
89.article-title {
90  font-size: 24px;
91}
92
93article ul {
94display: flex;
95margin: 10px 10px 0 0;
96}
97
98article li {
99  font-size: 14px;
100  list-style: none;
101  display: flex;
102  margin-right: 10px;
103  margin-bottom: 10px;
104}
105
106article p {
107  margin-top: 20px;
108  padding: 10px 40px 30px 40px;
109}
110
111article {
112margin-bottom: 60px;
113
114}
115
116#aside .section-author {
117height: auto;
118text-align: center;
119}
120
121
122#aside .section-author a img {
123width: 130px;
124height: 130px;
125object-fit: cover;
126border-radius: 50%;
127margin-bottom: 30px;
128
129}
130
131h3 {
132  font-size: 18px;
133  margin-bottom: 20px;
134}
135
136.prf {
137  font-size: 14px;
138  text-align: left;
139}
140
141h4 {
142  font-size: 14px;
143  text-align: left;
144}
145
146.section-author {
147  margin-bottom: 60px;
148  text-align: center;
149}
150
151.ranking,
152.archive {
153  text-align: center;
154}
155
156.archive ul {
157  border-top: 1px solid #333;
158
159}
160.archive li {
161  padding: 10px;
162  border-bottom: 1px solid #333;
163  text-align: left;
164}
165
166.content {
167  display: flex;
168  justify-content: space-between;
169}
170

K_3578

2021/07/24 08:19

htmlが途中で切れてるような。コードは全部載せてください。

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

回答2件

ベストアンサー

3つの子要素の幅の合計が、親要素の幅のすべてを取っているため、スペースが開かないだけなのでは。

たとえば

CSS
1#pickup article {
2  width: 32%;
3  border: 1px solid green;
4}

を加えてみれば、3つ合わせても96%で、4%の空きができるので、その分のスペースが Justify-content: space-between; によってできることを確認できるのではないかと思います。

投稿2021/07/24 09:17

itagagaki

総合スコア8402

mo-n

2021/07/24 10:27

ご回答ありがとうございました。頂いたコード入れましたら出来ました。単に画像のサイズが大きかったんですね。。。同じようにコード入れたつもりでも、違う出方になるんですね。（何か抜けているのかもしれませんが）とても勉強になりました。ありがとうございました。

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

一応提示のコードを試したところ私の環境では
justify-content: space-between;が効いている事を確認しています。

提示頂いていない部分で、他のcssを適用しており、それによって上書きされているのでは？
Chromeのデベロッパーツール等で、<div id="pickup" class="wrapper">
に適用されているcssを確認してみては？

投稿2021/07/24 08:24

K_3578

総合スコア1282

mo-n

2021/07/24 08:39

ご回答ありがとうございました。そうなんですね。この要素は３つ並べたimgに、かけてて、 <div id="pickup" class="wrapper">部分は、取り消し線は入らず、適用されているみたいに見えるんですが、imgは横並びになりますが、img同士のスペースが開かないんですよね。元のサイトは、justify-content: space-between;　により、img同士のスペースが開いているようにディベロッパーツールでは見えました。

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

あなたの回答