Posted at

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

More than 1 year has passed since last update.


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

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;はすごい!!