htmlヘッダー作成時のcssの記述

Question

Wordpressなどでよくあるデザインをhtmlとcssで実現させたい。

左寄せでロゴとその下にテキストが入り、右寄せにはSNSなどのアイコンその下には問い合わせ分または、文字などを表示できるようにしたい。

<header>
     <h1><a href="#">ロゴ</a></h1>
     <p class="text">説明文テキスト</p>
     <div id="sns">
         <ul>
           <li>imgファイル</li>
           <li>imgファイル</li>
         </ul>
         <p>[e-mail]</p>
     </div>
</header>

css
header {
  display: flex;
  justify-content: flex-end;
  align-items:center;
 }
上記のままでは横並びで、終わってしまう。

Comments

[m.ts10806]

今回のレイアウト実現のために参考にしたサイトなどありましたら質問本文に追記してください。

Answer 1

header {
  display: flex;
  align-items: center;
}

#sns {
  margin-left: auto;
}

Answer 2

左側は左寄せ、右側は右寄せにすれば

Answer 3

HTMLを少々変えていいなら、
下記が一番安定させられます。

flexは、まだIEが生き残ってるので、
ちょっと不安だったりします。

<header>
  <div id="logoId">
     <h1><a href="#">ロゴ</a></h1>
     <p class="text">説明文テキスト</p>
  </div>
  <div id="sns">
    <ul>
      <li>imgファイル</li>
      <li>imgファイル</li>
    </ul>
    <p>[e-mail]</p>
  </div>
</header>

header:after,
#sns > ul:after {
  clear: both;
  content: "";
  display: block;
}

#logoId {
  float: left;
  width: 100px; /* ロゴ画像の横幅 */
}

#sns {
  float: right;
  width: 200px; /* このブロックの横幅 */
}
#sns li {
  float: left;
}

Answer 4

調査したいデザインの style はブラウザの開発ツールで調べると捗ります。