サイトのグローバルメニューやナビゲーションバーを作るときによく使われるのが横並びのメニューです。
flexboxを活用すると、複雑な調整なしに簡単に横並びレイアウトを実現できます。
少し前は、横並びレイアウトに floatを使用していましたが、現在はCSS3から登場した flexbox が一般的になっています。
横幅や間隔の調整も柔軟にできるので、レスポンシブデザインにも最適です。
HTML
|
1 2 3 4 5 6 7 |
<ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> |
基本CSS
|
1 2 3 4 5 6 7 8 9 |
.nav { display: flex; gap: 16px; } .nav li { list-style: none; } |
右寄せにしたい場合は？
横並びにしたメニューを画面の右側に寄せたい場合は、justify-content: flex-endを使うと簡単に調整可能です。
|
1 2 3 4 5 6 7 |
.nav { display: flex; justify-content: flex-end; gap: 16px; } |
備考
gap は CSS Grid 同様、要素間の間隔を均等に調整でき便利です。
flex-directionをcolumnにすれば縦並びにも変更可能です。
