アイコンを綺麗に並べたい…

###ヘッターをdisplay: flexで綺麗に並べたいのですがうまくできません…
アイコンは左端、タイトルは真ん中、ハンバーガーマークは右端におきたいとと考えています
全体の親要素top-page-headerにjustify-content: space-around
をつけていますが現状PhotoロケのアイコンがPhotoロケアイコンの親要素photoroke-iconからはみ出てしまいます

原因としてヘッターの左にあるアイコンにトップページに戻るようにを指示する為に記述している
####a要素
が原因です
解決策ご存知の方いらっしゃいましたらご回答よろしくお願いいたします！

hetena19様よりご指摘いただきましたので情報追加いたします！
hetena19様ありがとうございます！

html
1<header>
2  <div class='top-page-header'>
3    <%#ロゴの情報が入る%>
4      <div class='photoroke-icon'>
5        <a href="/">
6          <img class='photoroke-icon-photo'src="/assets/Photoroke_logo.png">
7        <%# <%= link_to image_tag("Photoroke_logo.png",class:"photoroke-icon"),"/" %> 
8        </a>
9      </div>
10
11    <%#ページの名前が入る%>
12      <h2 class='top-page-name'>
13        ここに各ページの名前が入ります
14      </h2>
15
16    <%#ハンバーガーアイコンが入る%>
17      <p class='hamburger'>tekisuto</p>
18  </div>
19</header>

CSS
1.top-page-header {
2  width: 100vw;
3  height: 15vh;
4  display: flex;
5  background-color:#DDDDDD;
6  justify-content: space-around;
7  align-items: center;
8  position: fixed;
9
10}
11/* a{
12  box-sizing: border-box;
13  text-decoration: none;
14  width: 20%;
15  margin-left: 5vw; */
16
17.photoroke-icon{
18  width: 100%;
19  margin-left: 5vw;
20  height: 100%;
21}
22
23.photoroke-icon-photo{
24  max-width: 100%;
25}
26
27.top-page-name{
28  background-color: cornflowerblue;
29  height: 50%;
30  font-size: 3vh;
31}
32
33.hamburger{
34  background-color: darkgreen;
35  width: 100px;
36  height: 50px;
37  margin-right: 5vw;
38}

現在のコードはこのようになっています
質問させていただいた時と少し形が違いますがまだ解決はできていません。

![
このグレーの帯にアイコン、各ページの名前、ハンバーガーマークを入れたいと考えています

hatena19

2020/10/07 23:49 編集

HTMLコード、CSSコードを画像ではなく実際のものをコピーして貼り付けてください。そのとき、コードはマークダウンのコードブロックに入れてください。インライン要素（a要素）にも display: flex は効きます。画像を見ても横並びになっているようですが。どのようになるのが理想なのか、どの部分が理想と違うのか説明してもらえますか。

hatena19

2020/10/08 00:59

アイコン画像は左端、タイトルとハンバーガーマークは右端に寄せたいということですか。

EleAco

2020/10/08 01:13

hatena19さんご質問ありがとうございますアイコンは左端、タイトルは真ん中、ハンバーガーマークは右端におきたいとと考えています全体の親要素top-page-headerにjustify-content: space-around をつけていますが現状PhotoロケのアイコンがPhotoロケアイコンの親要素photoroke-iconからはみ出てしまいます

hatena19

2020/10/08 01:30

後から見た人のために、このコメントの内容を質問に追記しておいてください。

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

回答2件

ベストアンサー

最終的な理想のレイアウトがよく分からないが、
~~とりあえず、アイコンは左寄せ、ページタイトルとハンバーガーマークは右寄せに配置と仮定して~~、「アイコンは左端、タイトルは真ん中、ハンバーガーマークは右端」ということなら下記のCSSでどうですか。

css
1.top-page-header {
2  width: 100vw;
3  height: 15vh;
4  display: flex;
5  background-color:#DDDDDD;
6  justify-content: space-between; /* 修正 */
7  align-items: center;
8  position: fixed;
9}
10/* a{
11  box-sizing: border-box;
12  text-decoration: none;
13  width: 20%;
14  margin-left: 5vw; */
15
16.photoroke-icon{
17/*  width: 100%; 削除 */
18  margin-left: 5vw;
19  height: 100%;
20}
21
22.photoroke-icon-photo{
23/*  max-width: 100%; 不要 */
24  height: 100%; /* 追加 */
25}
26
27.top-page-name{
28  background-color: cornflowerblue;
29  height: 50%;
30  font-size: 3vh;
31}
32
33.hamburger{
34  background-color: darkgreen;
35  width: 100px;
36  height: 50px;
37  margin-right: 5vw;
38}

アイコン(.photoroke-icon)に width: 100%; を設定しているので他の要素が右に押し出されていますので、これは削除。
また、高さが指定してないので、画像オリジナルのサイズに表示されるのではみ出ます。高さをヘッダーの高さにしたいなら、height: 100%; を追加。

投稿2020/10/08 01:03

編集2020/10/08 01:29

hatena19

総合スコア33715

EleAco

2020/10/08 01:29

hatena19さん解決できました（；＿；）ありがとうございました！！ photoroke-icon-photoのmax-width:100%;が大きな原因だった気がします丁寧に修正箇所、追加箇所を記述してくださりありがとうございました私の説明不足で行いたい作業がうまく伝わっていませんでしたが上手く理解してくださりありがとうございます！

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