flexを設定しているのに,justify-content: center;が効かない原因がわからないです。

3つのボックス（親-子-孫）にflexを設定して、1つ目のボックスのitemをjustify-content: center;を設定したのですが、中央寄せになってくれなくて、悩んでいます。
原因を教えていただければ、幸いです。

ネットに記載されている原因の可能性を調べてみたのですが、該当しておらず・・・

margin:auto;を設定していないです。
::after ::beforeは設定していないです。
flex設定忘れないです。

イメージ説明

html
1<section class="aida1">
2        <div class="aida1-container1">
3            <div class="aida1-container2">
4                <div class="aida1-item1">
5                    <img src="./images/final-exam-assets/campaign/frame_left.png" class="aida1-imgl">
6                    <div class="aida-item11">
7                        <p class="aida-item11-p1">2021年度</p>
8                        <p class="aida-item11-p2">オンライン</p>
9                        <p class="aida-item11-p3">教室ランキング</p>
10                        <p class="aida-item11-p4"><span class="sp1">No.</span><span class="sp2">1</span><span class="sp3">※1</span></p>
11                    </div>
12                    <img src="./images/final-exam-assets/campaign/frame_right.png" class="aida1-imgr">
13                </div>
14                <div class="aida1-item2">
15                    <img src="./images/final-exam-assets/campaign/frame_left.png">
16                    <div class="aida-item11">
17                        <p class="aida-item11-p1">2021年度</p>
18                        <p class="aida-item11-p2">オンライン</p>
19                        <p class="aida-item11-p3">習い事ランキング</p>
20                        <p class="aida-item11-p42"><span class="sp12">No.</span><span class="sp22">1</span><span class="sp32">※1</span></p>
21                    </div>
22                    <img src="./images/final-exam-assets/campaign/frame_right.png">
23                </div>
24            </div>
25            <p class="aida1-text1">※1 2021年度15歳以上を対象としたインターネット調査</p>
26        </div>
27        <div>
28            <div class="aida1-text2"><span class="aida1-text2-span1"></span><span class="aida1-text2-span2">期間限定</span><span class="aida1-text2-span3"></span></div> 
29            <div class="aida1-link">
30                <a href="#" class="aida1-ham-fed-item6">初月0円キャンペーン<i class="bi bi-arrow-right-short"></i></a>
31            </div>
32        </div>
33    </section>

css
1.aida1{
2    padding: 32px 24px;
3    background-color: rgba(0,121,242,0.05);
4    display: flex;
5    flex-direction: column;
6}
7
8.aida1-container1{
9    display: flex;
10    flex-direction: column;
11    justify-content: center;
12}
13
14.aida1-container2{
15    display: flex;
16    column-gap: 2px;
17    justify-content: center;
18}
19
20.aida1-item1{
21    display: flex;
22    justify-content: center;
23    width: 326px;
24    height: 112px;
25    margin-left: -7px;
26}
27
28.aida1-item2{
29    display: flex;
30    justify-content: center;
31    width: 326px;
32    height: 112px;
33    margin-left: 7px;
34}
35
36.aida-item11{
37    position: relative;
38    display: flex;
39    flex-direction: column;
40    align-items: center;
41    margin-right: -1px;
42}
43
44.aida-item11-p1{
45    font-size: 12px;
46    font-weight: bold;
47    color: #555555;
48    padding-top: 3px;
49    padding-right: 1px;
50}
51
52.aida-item11-p2,.aida-item11-p3{
53    font-size: 13px;
54    font-weight: bold;
55    padding-bottom: 2px;
56    padding-top: 2px;
57}
58
59.aida-item11-p4{
60    position: absolute;
61    top:59px;
62    left:3px;
63    height: 59.82px;
64    width: 86px;
65}
66
67.aida-item11-p42{
68    position: absolute;
69    top:59px;
70    left:9px;
71    height: 59.82px;
72    width: 86px;
73}
74
75.sp1,.sp2,.sp12,.sp22{
76    display: inline-block;
77    color: #f26618;
78    padding-right: 0px;
79    margin-top: -2px;
80    font-size: 32px;
81    font-family: Poppins;
82    font-style: italic;
83    font-weight: 800;
84}
85
86.sp12,.sp22{
87    color: #f2a118;
88}
89
90.sp2,.sp22{
91    font-size: 39px;
92}
93
94.sp3,.sp32{
95    color: #666666;
96    font-size: 10px;
97}
98
99.aida1-text1{
100    font-size: 12px;
101    text-align: center;
102    margin-top: 11px;
103    margin-bottom: 21px;
104}
105
106.aida1-text2 span{
107    display: inline-block;
108}
109
110.aida1-text2-span1{
111    width: 30px;
112    height: 2px;
113    margin-bottom: 7px;
114    background-color: #f11f8d;
115    transform: rotate(60deg);
116}
117
118.aida1-text2-span3{
119    width: 30px;
120    height: 2px;
121    margin-bottom: 7px;
122    margin-left: 1px;
123    background-color: #f11f8d;
124    transform: rotate(-60deg);
125}
126
127.aida1-text2{
128    font-size: 20px;
129    font-weight: bold;
130    text-align: center;
131    margin-bottom: 8px;
132}
133
134@media screen and (min-width:768px){
135    .aida1{
136        padding: 32px 24px;
137        background-color: rgba(0,121,242,0.05);
138        display: flex;
139        flex-direction: row;
140        justify-items: center;
141    }
142
143}

回答1件

ベストアンサー

css
1@media screen and (min-width:768px){
2    .aida1{
3        padding: 32px 24px;
4        background-color: rgba(0,121,242,0.05);
5        display: flex;
6        flex-direction: row;
7        justify-items: center;
8    }
9
10}

ここで justify-content ではなく justify-items プロパティを指定しているのは意図的でしょうか。

投稿2023/03/12 13:03

arcxor

総合スコア2511

回答へのコメント

yura-asuha

2023/03/12 13:11

早速のご回答ありがとうございました。なんてことだ・・・ほんとだ・・・ごめんなさい。なぜ、そこが違っているのに、見えてなかったのか自分でも不思議です。わたしの見落としです。ご指摘ありがとうございました。

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.69%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

トップ CSS3に関する質問

flexを設定しているのに,justify-content: center;が効かない原因がわからないです。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

flexを設定しているのに,justify-content: center;が効かない原因がわからないです。

同じタグがついた質問を見る