コピペでそれっぽいFlexboxなヘッダー

メモ書き程度の記事です。

display: flex;とちょっとのCSSでできるそれっぽいヘッダー

用意するもの

• HTMLファイル
• CSSファイル
• エディタ

コピペ本文

header.html

<header>
  <nav>
    <ul>
      <li><a href="/">ロゴ</a></li>
      <li><a href="#">メニューA</a></li>
      <li><a href="#">メニューB</a></li>
      <li><a href="#">メニューC</a></li>
    </ul>
  </nav>
</header>

これに

header.css

ul {
  display: flex;
}

ul li {
  padding: 10px 20px;
}

ul li:first-child {
  margin-right: auto;
}

おしまい。
display: flex;はすごい！！