justify-content: flex-end;が効かない

今、住友商事のLPを模写コーディングしています。
画像のように日本語から右の部分を「justify-content: flex-end;」を使って右寄せにしようとしているんですが、
「justify-content: flex-end;」を使っても右寄せにできません。

コードは以下です。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="style.css">
7  <title>住友商事</title>
8</head>
9<body>
10  <header class="t-header">
11      <div class="mti-col-md-12">
12        <div class="globalHeder">
13          <div class="companyLogo">
14            <h1>
15              <img src="img/logo.svg" alt="住友商事">
16            </h1>
17              <span class="japan">日本</span>
18          </div>
19          <div class="Navigation">
20              <div class="switch">
21                <div class="switch">
22                  <ul>
23                    <li>日本語</li>
24                    <li class="border">English</li>
25                  </ul>
26                </div>
27              </div>
28              <div class="wrap">
29                  <div class="selectRegin">
30                    <img src="img/icons/icon-region.png" alt="Regin">Select Region
31                  </div>
32                  <div class="searchButton">
33                    <span class="search">
34                      <img src="img/icons/icon-search.png" alt="サイト検索">
35                    </span>
36                  </div>
37              </div>
38          </div>
39        </div>
40      </div>
41  </header>
42</body>
43</html>

css
1.t-header {
2  border-top: 4px solid #b5dedb;
3  top: 0;
4  left: 0;
5  width: 100%;
6  position: fixed;
7}
8
9.globalHeder {
10  display: flex;
11  align-items: flex-start;
12  margin-right: 35px;
13}
14
15.companyLogo {
16  display: flex;
17  align-items: center;
18  margin-left: 20px;
19}
20
21img {
22  max-width: 100%;
23  width: auto;
24  height: 100%;
25  box-sizing: border-box;
26  vertical-align: top;
27}
28
29.japan {
30  margin-left: 20px;
31}
32
33.Navigation {
34  padding: 0 7px;
35  display: flex;
36  align-items: center;
37  justify-content: flex-end;
38}
39
40.switch {
41  margin: 10px 0 10px 24px;
42}
43
44ul {
45  display: flex;
46  align-items: center;
47 
48}
49
50li {
51  list-style: none;
52}
53
54.border {
55  border-left: 1px solid #e5e5e5;
56  margin-left: 15px;
57  padding-left: 15px;
58}
59
60.wrap {
61  display: flex;
62  margin: 10px 0 10px 24px;
63  border-left: 1px solid #e5e5e5;
64  margin-left: 24px;
65  padding-left: 24px;
66}
67
68.searchButton {
69  border-left: 1px solid #e5e5e5;
70  margin-left: 24px;
71  padding-left: 24px;
72}
73
74

.Navigationに「justify-content: flex-end;」を使えば右寄せにできると思っているんですが右に寄せれず調べてもわからない状態です。
ご教授よろしくお願いします。

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

回答1件

ベストアンサー

こんにちは。

こうではないですか？

css
1.globalHeder {
2	justify-content: space-between;
3}

または、こうでは？

css
1.Navigation {
2	flex-grow: 1;
3}

中身のアイテムの間や周囲に間隔を配置する方法を定義します。

justify-content - CSS: カスケーディングスタイルシート | MDN

ということなので、.Navigationに「justify-content: flex-end;」を使えば、.Navigationの中身のアイテムを.Navigationの中で末尾に寄せることになります。
ですので、.Navigationに「justify-content: flex-end;」を使うのであれば、その幅がページ右端まである必要があります。

ですので、回答のように、親要素にスタイルをつけて対応するか、.Navigationの幅を広げるか、が解決方法となります。

投稿2020/10/13 07:38

編集2020/10/13 07:43

Lhankor_Mhy

総合スコア36104

sonnabanana

2020/10/13 08:08

こんばんは！ご回答ありがとうございます！ ```css .globalHeder { justify-content: space-between; } ``` こちらの記述で右に寄せることができました！ justify-contentについて理解がまだ曖昧で参考サイトをみたところ理解することができました！本当ありがとうございました！

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