Progate　中級　①どこが原因でログインが伸びているのか　②flexboxがうまくきかない

前提・実現したいこと

Progate　中級　道場より。
何度も同じようなところで申し訳ないですが、以下について質問させて頂きます。

①どこが原因で「ログイン」が伸びているのか。
→端と端の始点と終点の位置はあっているので、おそらく幅1170pxが効いているのではと推測しています。
実際ロゴと同じ幅かどうかは不明ですが、見た目の長さ的に「width:124px」などと指定すると一応見本のような長さ
になりますが、正答ではその指定がないので、本来はうまくやれば省けるはずの指示なのではと疑問に思っています。

②flexboxがうまくきかない。
→仮に①で長さをクリアしたとしても、flexboxがうまくきいていないようで、ロゴのしたに「ログイン」が来てしまいます。
私の推測では、ロゴ自体が1170pxいっぱいいっぱいになっているため、本来は指示が聞いてはいるのだが、ロゴが端まで占めているために繰り下がって、下にきているのかと推測しました。ただ、「width:124px」も指定しているはずなので、そんなはずはないかとも思っています。

発生している問題・エラーメッセージ

赤く囲まれた部分を見直してみよう

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12    <!--ここからheader-->
13  <header>
14    
15      <div class="container">
16        <div class="header-left">
17    <img class="logo"  src="https://prog-8.com/images/html/advanced/main_logo.png" >
18    </div>
19    <div class="header-right">
20    <a href="#" class="login">ログイン</a>
21    </div>
22    </div>
23  </header>
24<!--ここまでheader-->
25  <!--ここからtop-->
26  <top>
27      <div class="top-wrapper">
28        <div class="container">
29        <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
30        <p>Progateはオンラインプログラミング学習サービスです。<br>
31初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
32        </div>
33          <a href="#" class="btn signup">新規登録はこちら</a>
34          <p>or</p>
35          <a href="#" class="btn facebook"><span class="fa  fa-facebook"></span>Facebookで登録</a>
36          <a href="#" class="btn twitter"><span class="fa  fa-twitter"></span>Twitterで登録</a>
37    </div>
38  </top>
39  <!--ここまでtop-->
40 
41
42</body>
43</html>

該当のソースコード

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22/*ここからtop*/
23
24
25.top-wrapper {
26  background-image: url(https://prog-8.com/images/html/advanced/top.png);
27  background-size: cover;
28  padding-top: 180px;
29  padding-bottom: 100px;
30  text-align: center;
31   color:white;
32   
33}
34.container {
35  width:1170px;
36  margin: 0 auto;
37}
38.top-wrapper h1{
39  font-size:45px;
40  font-weight: bold;
41  letter-spacing:5px;
42  opacity:0.7;
43}
44
45.top-wrapper p {
46  opacity: 0.7;
47  margin-bottom:15px;
48}
49
50.btn {
51 color:white;
52  padding:8px 24px;
53  opacity:0.8;
54  border-radius:4px;
55  display:inline-block;
56}
57
58
59.signup {
60  background-color:#239b76;
61  margin-bottom:15px;
62}
63
64.facebook {
65  background-color:#3b5998;
66  margin-right:10px;
67}
68
69.twitter {
70  background-color:#55acee;
71}
72
73.btn:hover {
74  opacity:1;
75}
76.fa {
77  margin-right:5px;
78  
79  
80}
81
82/*ここからheader*/
83header {
84 background-color:rgba(34, 49, 52, 0.9);
85  width:100%;
86  position:fixed;
87  top:0;
88  z-index:10;
89  height:65px;
90  display:flex;
91  justify-content:space-between;
92  align-items:center;
93
94  
95}
96
97
98.logo {
99  width:124px;
100  margin-top:20px;
101}
102
103.header-left {
104  display:flex;
105  justify-content:space-between;
106  align-items:center;
107  
108  
109}
110
111.header-right {
112  background-color:rgba(255, 255, 255, 0.3);
113  transition:all 0.5s;
114 
115   
116}
117
118.header-right a {
119  color:white;
120  display:block;
121   line-height:65px;
122   padding:0 25px;
123   
124}
125
126.login {
127  
128}
129
130.header-right:hover {
131  background-color:rgba(255, 255, 255, 0.5);
132}
133

試したこと

似通ったことを過去に質問しているので、何度も質問するのもと思い何度も正答と見比べましたが、そろそろ悩んで一時間経過してしまうので、思い切って質問させて頂きます。

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

Windouws

参考写真

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

回答2件

下記CSSで答えの画像通りになるはずです。

css
1/*ここからheader*/
2header {
3 background-color:rgba(34, 49, 52, 0.9);
4  width:100%;
5  position:fixed;
6  top:0;
7  z-index:10;
8  height:65px;
9}
10
11header .container {
12  display:flex;
13  justify-content:space-between;
14  align-items:center;
15
16}
17
18
19.logo {
20  width:124px;
21}
22
23.header-left {
24  display:flex;
25  justify-content:space-between;
26  align-items:center;
27}
28
29.header-right {
30  background-color:rgba(255, 255, 255, 0.3);
31  transition:all 0.5s;
32}
33
34.header-right a {
35  color:white;
36  display:block;
37   line-height:65px;
38   padding:0 25px;
39}
40
41.login {
42}
43
44.header-right:hover {
45  background-color:rgba(255, 255, 255, 0.5);
46}

display:flex;は整列させたい要素の親要素に設定します。
これをフレックスコンテナ（Flex Container）といいます。
整列させたい要素はフレックスアイテム（Frex Item）です。
このことをしっかりと理解してください。

FlexBoxの解説ページ等で基本から学習されることをお勧めします。

投稿2020/12/21 05:05

hatena19

総合スコア34075

mitrasi

2020/12/21 06:02

いつもご回答ありがとうございます！おっしゃる通り、おかげさまで頂いたコードでは確かに正解致しました！一旦道場は一休みして、Flexboxを再度しっかりと学習してから出直してきます????

hatena19

2020/12/21 06:20

display:flex; を設定するのが、横並びさせたい .header-left と .header-right の親要素になっていなかったのが原因ですね。

mitrasi

2020/12/21 06:35

やはりflexの指示を行う場所に自信がなかったのでそれかとは思っていましたが、、どこがどう違うかが分からなかったため、大変助かりました！次こそflexboxに関する質問が出ないように時間をかけて学んでみます。ありがとうざいました！

mitrasi

2020/12/22 01:05

度々すみません???? flexboxを基礎からまとめ直していて、「並び替えをしたい要素の親要素に指示をすること」はわかったのですが、ひとつ疑問が浮上しました。親要素が「container」であるならば「header-left」と「header-right」はあくまでも同じ階層？の子要素だと考えます。親要素で「justify-contens:between」を指定するならば「header-left」の指示は不要に思うのですがどうなのでしょうか？「float」のときは横並べしたいものそれぞれに位置の指示を出すので「header-leftを指定したい位置に定めることで、それの位置からheader-rightに指示をしたときの右の位置が固められる」という曖昧な自己解釈でひとつずつ固めていくのだと理解していたのですが…???? ※あくまでも追加の質問となってしまいますので、お手隙の際にもしよろしければご回答いただければ大変助かります！

hatena19

2020/12/22 01:14

.header-left の display:flex; の意味がわからないということでしょうか。これは、 align-items:center; で子要素を上下中央位置に配置するためです。 .header-left の子要素は一つだけですので、justify-contens:between の設定は無意味ですね。これは削除しても問題ないです。

mitrasi

2020/12/22 01:26

そうです！header-leftにflexboxの指示が必要か否か、とお聞きしたかったです。では、やはり「container」にflxeboxの指示を出しているので、子要素の「header-left」などに横並べの指示は不要であるという把握でよろしいでしょうか？何度もお手数おかけして恐縮でございます????

hatena19

2020/12/22 02:15

header-left の子要素を整列させたいということがなければ不要です。

mitrasi

2020/12/22 04:26

なるほど！であれば今回不要だったのですね、ご教授くださりありがとうございました(*^-^*)

hatena19

2020/12/22 04:29

今回は子要素の画像を上下中央位置に自動配置したいなら必要です。 margin-topなどで手作業で位置調整するなら必要ないです。

mitrasi

2020/12/23 02:53 編集

では、左の所定の位置のど真ん中に自動調整したい場合は「display:flex; align-items:center;」という指示は必要ですが、header-left自体には子要素は一つしかないため、header-left内の複数要素に対する指示となる「justify-contents」は不要であるとの認識でよろしいでしょうか？

hatena19

2020/12/23 02:41

はい、そうです。

mitrasi

2020/12/23 02:48

とてもわかりやすかったです！ご丁寧に最後までお付き合いくださり、本当にありがとうございました！！

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

ベストアンサー

こんにちは。

①どこが原因で「ログイン」が伸びているのか。

widthが指定されていないこと、およびブロック整形コンテキストの通常フローに参加しているのが原因です。

初期値 auto

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

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

...
If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
10.3.3 Block-level, non-replaced elements in normal flow | Visual formatting model details

②flexboxがうまくきかない。

→仮に①で長さをクリアしたとしても、flexboxがうまくきいていないようで、ロゴのしたに「ログイン」が来てしまいます。

フレックスレイアウトで横並びにする場合、フレックスコンテナ（display: flexが設定された要素）が横並びになるのではなくて、フレックスアイテム（フレックスコンテナの子要素）が横並びになります。
したがって、横並びにしたい要素の親要素にdisplay:flexを設定してください。

投稿2020/12/21 05:02

Lhankor_Mhy

総合スコア36960

mitrasi

2020/12/21 05:58

いつも大変お世話になっております????ご回答ありがとうございます！ ①やはり幅が原因だったのですね。ちなみにお手数かけて申し訳ないのですが、その「widthが指定されていない」というのはどのクラスのことでしょうか？ containerで全体的に共通して「width:1170px」を指定しているので不要なのかなと思っていたのですが…???? 親要素に指定するなどは前回ご教授頂いて学んでいたのですが、本当に直下の子要素なのですね。。まだまだ理解が足りていませんでした。精進いたします。

Lhankor_Mhy

2020/12/21 06:02

width は「継承なし」のプロパティなので、設定されていない要素は全て指定されていないことになり、初期値であるautoが使われます。

mitrasi

2020/12/21 06:33

なるほど！指定がある場合はその通り、指定がない場合は原則autoとして認識されてしまうのですね！継承などの概念は知識不足でしたので、もう少し勉強致します。丁寧なご回答ありがとうございました！

Lhankor_Mhy

2020/12/21 06:40

付け加えると、width: auto は、・親要素が display: block や display: inline などの時には、親要素いっぱいに広がり、・親要素が display: flex などの時には、内容物の幅に依存します。（細かい話を省略しています）

mitrasi

2020/12/21 06:51

というと、今回の場合ですと、width指定のしなかった「header-right」の親要素である「container」が1170pxであったたために、「header-right」は1170pxの幅に依存した、ということでしょうか？ ※余談になりますので、ご回答はお手隙があればで構いません。