![](https://pooooooool.com/wp-content/uploads/2020/04/thumv_flexbox_header_nav.jpg)
こんにちは、中の人です。
今回はFlexboxを用いて、簡単にヘッダーナビを実装する方法をご紹介します。
早速ですが、サンプルになります。
実装サンプル
■HTML
■CSS .header { align-items: center; background: #f5f5f5; display: flex; padding: 20px; } .header-logo { margin-right: auto; } .nav-menu { align-items: center; display: flex; } .menu-item:not(:last-child) { margin-right: 20px; }
解説
今回のポイントは、ざっくりと2点。
こちらになります。
- 並列させたい要素の親要素に”display: flex;”を指定する
- ロゴに”margin-right: auto;”を指定して右側の要素を押し出す
flexboxは汎用性が高く、いろいろなレイアウトに応用が効きそうでうね。