HTML
CSS
初心者

コピペでそれっぽい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;はすごい!!