flexboxを使ってみる – ナビゲーション編

こんにちは。

HTML&CSSと出会ってからまだ日の浅い私ですが、手探りで勉強してきた中で、ちゃんと解決できていない課題や気になりつつも手がついていない課題が出てきました。これらを解決するため、ブログで公開しながら勉強していこう、という記事です。

今回のテーマはタイトルの通り、flexboxです。

概念は何となく分かっていても、いざ使おうとするとよく分からない…。しかも最初の学習で使った参考書ではfloatを使って要素を横並びにすることを学び（これも結構練習して覚えたので嬉々として使っていた）、そればかりで何となくそのままになってしまっていました。

でも、使えたらとても楽ですってよ、これからはflexboxの時代なんですってよ、奥様。と背中を押され、改めて勉強してみることにしました。

サイトや本を参照しつつ、自分なりにコードを書くことで、少しずつ覚えていきたいと思います。今回はナビゲーションをflexboxでレイアウトしてみました！（プロパティ一つ一つの説明やまとめは良い記事が他にたくさんありますので、私は「こんな風にレイアウトしてみたいな」と思ったパターンのみを試しています）

ulをコンテナにして、

を指定するだけで綺麗に横一列等間隔配置。

今回トライしたかったのはこちらのレイアウト。上の均等揃えのコードそのまま、唯一ロゴ部分の要素に

margin-right: auto

を指定しただけ。あら楽しい。

プロパティ多いし、コード書くのも大変そう…なんて思っていましたが、必要なことだけ指定すればシンプルに書けるのですね。食わず嫌い良くない。

プロパティの組み合わせで更にどんなことができるのか、色々試しながらまた公開していきたいと思います。

のらねこのあしあと