Flexboxで実装する定番レイアウトのコードのまとめ

Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。

ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。

Evergreen CSS Flex Layouts With Live Demos
by Miroslav Nikolov

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 1. Flexboxで実装するスマホに対応したカードのレイアウト
• 2. Flexboxで実装する高さが等しい複数のカード
• 3. Flexboxで実装したカードの高さをコンテンツベースにする
• 4. Flexboxで実装するコンテンツに合わせて幅を調整できるカード
• 5. Flexboxで中央揃え
• 6. Flexboxで実装する価格表のカード
• 7. Flexboxで実装する2つのサイドバーを備えた3列レイアウト
• 8. Flexboxで実装するヘッダ・コンテンツ・フッタを備えたレイアウト
• 9. Flexboxで実装するヘッダ・フッタ・サイドバーを備えたレイアウト
• 終わりに

はじめに

こんなことはありませんか？
よく使用するUIのレイアウトを何度も何度も実装する必要があり、その度にGoogleでFlexboxを検索してしまう。しかし、それでも自分でやる必要があり、手始めとしてコピペで利用できるコードを見つけるのが面倒なのが現状です。

ここで紹介するのは野心的なものではありませんが、CSS Flexboxで実装した一般的なレイアウトの再利用可能なコードとオンラインデモをまとめたものです。これらのコードをベースにFlexboxのさまざまなコンテンツを実装できます。

Flexbox、またはdisplay: flex;は現在、Webページのグリッドやレイアウトを構築するのに最適な方法で、しばらくはトップの座を維持すると思われます。ここで紹介するコードは、テンプレートや要素を配置する際に非常に便利です。

ここで紹介するFlexboxで実装するレイアウトは、9種類です。

ここで紹介するFlexboxで実装するレイアウト

ベースとなるHTMLの構造

HTMLの基本構造は、親要素（.parent）と複数の子要素（.child）です。レイアウトによって、子要素が減ったり、入れ子になったりします。

Flexboxの各プロパティの詳しい使い方は、以前の解説記事をご覧ください。

• CSS Flexboxの基礎知識と使い方をやさしく解説

1. Flexboxで実装するスマホに対応したカードのレイアウト

1つ目のレイアウトは、3つのアイテムを1行に表示する一般的なFlexboxのレイアウトから派生したものです。スマホなどの小さいスクリーンでは、最後のカードを全幅で表示することができます。

実装コード

実装のポイントは、親要素（.parent）に定義されたflex-wrap: wrap;と、最後の子要素（.child:last-child）に定義されたwidth: 100%;です。これで最後のカードが全幅になります。

2. Flexboxで実装する高さが等しい複数のカード

同じ幅の複数のカードを1行に表示し、もっとも高さがあるカードに合わせて他のカードの高さを伸ばしたい時がありませんか？

実装コード

親要素（.parent）にdisplay: flex;を追加するだけで、デフォルトでストレッチ機能が適用されます。各カード（Flexアイテム）の幅を同じにするには、flex-growとflex-basisも必要になります。

3. Flexboxで実装したカードの高さをコンテンツベースにする

各カードの高さを同じにするのではなく、コンテンツに基づいて高さを自動調整されるように実装します。

実装コード

親要素（.parent）にalign-items: flex-start;を定義すると、コンテンツの量に応じて高さが決まります。各カードの幅を同じにするのは、2のデモと同じ方法です。

4. Flexboxで実装するコンテンツに合わせて幅を調整できるカード

カードには流動的な幅だけでなく、コンテンツに応じたサイズのカードが必要になることもあります。下記のデモページで、テキスト量を変更したりスクリーンサイズを変更してみてください。右側のカードはテキスト量と一緒に大きくなり、親コンテナの幅が狭くなってもカードは一定の幅より狭くならないのが分かると思います。左側のカードは、親コンテナが狭くなるとそれに合わせて狭くなります。

実装コード

この効果を適用するには、その子要素（span class="marker1">.child:last-child）にflex-shrink: 0;を与えます。意味は、「何があっても縮小しないでください」です。デフォルトでは、この値は1になっています。

5. Flexboxで中央揃え

Flexboxで画像やテキストを天地左右の中央に配置するには、親要素（.parent）にいくつかのCSSを適用するだけです。ここでは、2枚のカードを中央に配置します。

実装コード

flex-direction: column;の代わりに、rowでも同じ結果になります。

6. Flexboxで実装する価格表のカード

サービスやプランの価格表でよく使用されるレイアウトです。2番目のカードは一番お勧めのプランやサービスで、Flexboxで簡単に実装できます。デモでは、すべてのカードが親コンテナ内の垂直方向の中央に配置され、2番目のカードは高さを100%にしています。

実装コード

このコードで注目すべき点は、3つあります。
1. 親は垂直に配置されたアイテムと一緒に直接または間接的に高さを定義する。
2. flex-grow: 1;で子要素（.child）が水平方向のスペースを埋めるようにする。
3. aiign-self: stretch;で2番目のカードが垂直方向のスペースを埋めるようにする。

7. Flexboxで実装する2つのサイドバーを備えた3列レイアウト

Flexboxはカードの配置だけでなく、Webページのレイアウトにも非常に便利です。
下記のデモでは、コンテンツエリアの両サイドに2つのサイドバーがあります。

実装コード

コンテンツエリア（2番目のFlexアイテム）の幅を広くしたいので、flex-grow: 1;を与えています。これにより、スクリーンのサイズに応じて、コンテンツエリアの幅が変化します。実際のプロジェクトで使用する際は、サイドバーの幅を明示的に定義する必要があるかもしれません。

8. Flexboxで実装するヘッダ・コンテンツ・フッタを備えたレイアウト

ヘッダ・コンテンツ・フッタを備えてWebページのレイアウトもFlexboxで簡単に実装できます。7のデモを90度傾けて見てもいいかもしれませんが、違いは行が列になっています。

実装コード

行を列にするには、flex-direction: column;です。7のデモと同様に、ヘッダとフッタの高さを明示的に定義しても問題ありません。

9. Flexboxで実装するヘッダ・フッタ・サイドバーを備えたレイアウト

このレイアウトは少し複雑で、ネストされたFlexboxアイテムが必要です。8のデモに少し手を加えます。

実装コード

中央のセクション（.main）にはコンテンツとサイドバーがあり、そこにもdisplay: flex;があります。コンテンツ（.content）は、flex-grow: 1;によりスペースのほとんどを占めています。実際のプロジェクトで使用する際、幅や高さを明示的に定義しても問題ありません。

終わりに

ここで紹介したFlexboxのレイアウトは、が非常にシンプルなコードです。ネット上にある基礎知識に記載されているCSSを使えば、簡単に実現できます。
参考: CSS Flexbox の基礎知識と使い方をやさしく解説

Flexboxはさらに、より複雑なグリッドを実装することもできます。
以前はJavaScriptを使用しないと実装できなかったレイアウトでも、Flexboxだけで実装できます。
参考: CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説