フッターのリストにjustify-content: space-between;を適用したい

##写真の部分のリストにjustify-content: space-between;を適用したいのですが記述しても全く変化がありません。footer__listの部分にかけると思ったのですが全く変化しないので何か邪魔しているような感じがするのですが解決策がわからないので教えていただけると幸いです

html
1<footer class="footer">
2      <ul class="footer__list">
3        <li class="contact">
4          <a href="#"><img src="images/mail.svg" alt="" class="img-fluid"><span>contact</span></a>
5        </li>
6        <li class="copyright">
7          &copy; AleXss Hair
8        </li>
9        <li class="sns-icon-fb">
10        　<a href="#" ><img src="images/face-1.svg" alt=""></a>
11      　</li>
12        <li class="sns-icon-twi">
13          <a href="#" ><img src="images/twitter-1.svg" alt=""></a>
14        </li> 
15      </ul>
16    </footer>

css
1.footer{
2  background-color: $cBlack;
3  height: 200px;
4  display: flex;
5  align-items: center;
6  
7  
8  
9  &__list{
10    display: flex;
11    align-items: center;
12    margin: 0;
13    padding: 0;
14    list-style: none;
15  }
16}
17
18.contact{
19  width: 2em;
20
21  & > a{
22  text-decoration: none;
23  color: $cWhite;
24  }
25}
26
27.copyright{
28  color: $cWhite;
29}
30
31
32.sns-icon-fb{
33  margin: 0;
34  width: 2em;
35}
36
37.sns-icon-twi{
38  margin: 0;
39  width: 2em;
40}

追記margin0はデフォルトでかかってしまっているものをうちけしています

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

回答1件

ベストアンサー

フレックスアイテムに幅を設定しないと、中身の幅になります。

footer.footer フレックスコンテナ(flexを設定した要素)
ul.footer__list フレックスアイテム（フレックスコンテナの子要素）

幅を指定しないと ul.footer__listの幅は中身の幅になります。(子要素のliの幅の合計)
そのため、ul.footer__list に justify-content: space-between; を設定しても余白自体がないので見た目の変化はないです。space-between は余白を均等に挿入するという意味ですので。

css
1.footer{
2  background-color: Black;
3  height: 200px;
4  display: flex;
5  align-items: center;
6
7  &__list{
8    display: flex;
9    justify-content: space-between;
10    align-items: center;
11    margin: 0;
12    padding: 0;
13    list-style: none;
14    width: 100%; //追加
15  }
16}