こんにちは、ユアサです。
アームズでフロントエンドの見習いとして活動し始めて1ヶ月ほどが経ちます。まだまだ勉強することは多いですが、一つひとつを焦らず段階を踏んで学んでいけたらと思っています。
今回は、自分が勉強していく中で知ったCSSのフレックスボックスを使った汎用性の高そうなコードををいくつかまとめていきます。よかったらぜひ使ってみてください。
グローバルナビゲーション
横に並ばせたい要素の親要素に「display: flex;」を書きます。
コード内に書かれているliタグの要素を横並びにするとグローバルナビゲーション風の並びにできるので、親要素のulタグに適応します。
See the Pen ブログ用 by felly (@felly00505) on CodePen.
また各項目の並びはデフォルトでは左揃えになっていますが、右揃えにしたい場合はulタグのスタイルに「justify-content: flex-end;」、中央揃えの場合は「justify-content: center;」、均等配置の場合は「justify-content: space-between;」を追加すると実装できます。
コピーライトや住所表記などのフッターの要素を両端揃えにする
フッター内で各要素を「display: flex;」で横並びにして、「justify-content: space-between;」で均等配置させます。
フッター内の要素二つをフッター内の両端にそれぞれ要素を寄せて表示できるようになります。ここに更にフッターの中央に会社名など追加したい場合も、HTML内に追加するだけで勝手に均等揃えにしてくれるので両端揃えさせたい要素の間にpタグなどで追加すれば実装できます。
See the Pen JjEpXoX by felly (@felly00505) on CodePen.
多数のボックスの整列
こちらも並べる各フレックスボックス自体は「display: flex;」で並べます。
またフレックスボックスは、フレックスボックス内の要素が1列に収まらない場合に改行して表示させることができます。「flex: 0 0 calc((100% - 50px) / 5);」であらかじめ各フレックスボックスのサイズを設定して、この記事ではショートハンドで書きましたが「flex-flow: row wrap;」を追加することによってフレックスボックス内の要素をフレックスボックスのサイズの中で横並び・改行をさせるようにできます。
See the Pen display:flex boxes by felly (@felly00505) on CodePen.
まとめ
今回は、僕がCSSの勉強をしている中でも興味を持ったフレックスボックスを使って作ることのできるページのパーツのコーディング例をまとめました。
もちろんまだまだ色んなパーツが作れますが、勉強している中でフレックスボックスは個人的にはイメージしやすく汎用性のある要素だと感じたので、積極的に様々な場面で使っていけたらと思います。
今回も最後まで読んでいただきありがとうございました（^人^）
