Flexboxで実装する定番レイアウトのコードのまとめ
Post on:2021年4月1日
sponsors
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）です。レイアウトによって、子要素が減ったり、入れ子になったりします。
|
1 2 3 4 5 6 |
<div class="parent"> <div class="child">...</div> <div class="child">...</div> <div class="child">...</div> ... </div> |
Flexboxの各プロパティの詳しい使い方は、以前の解説記事をご覧ください。
1. Flexboxで実装するスマホに対応したカードのレイアウト
1つ目のレイアウトは、3つのアイテムを1行に表示する一般的なFlexboxのレイアウトから派生したものです。スマホなどの小さいスクリーンでは、最後のカードを全幅で表示することができます。
See the Pen
Drop Last Item Full Width by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
実装のポイントは、親要素（.parent）に定義されたflex-wrap: wrap;と、最後の子要素（.child:last-child）に定義されたwidth: 100%;です。これで最後のカードが全幅になります。
|
1 2 3 4 5 |
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.parent { display: flex; flex-wrap: wrap; } .child { flex-grow: 1; } .child:last-child { width: 100%; } |
2. Flexboxで実装する高さが等しい複数のカード
同じ幅の複数のカードを1行に表示し、もっとも高さがあるカードに合わせて他のカードの高さを伸ばしたい時がありませんか？
See the Pen
Same Height, Same Width by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
親要素（.parent）にdisplay: flex;を追加するだけで、デフォルトでストレッチ機能が適用されます。各カード（Flexアイテム）の幅を同じにするには、flex-growとflex-basisも必要になります。
|
1 2 3 4 5 6 7 8 9 |
<div class="parent"> <div class="child"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> <div class="child">Contrary to popular belief, Lorem Ipsum is not simply random text.</div> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> |
|
1 2 3 4 5 6 7 8 9 |
.parent { display: flex; justify-content: space-between; } .child { flex-grow: 1; flex-basis: 0; } |
3. Flexboxで実装したカードの高さをコンテンツベースにする
各カードの高さを同じにするのではなく、コンテンツに基づいて高さを自動調整されるように実装します。
See the Pen
Flexbox Children with Auto Height by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
親要素（.parent）にalign-items: flex-start;を定義すると、コンテンツの量に応じて高さが決まります。各カードの幅を同じにするのは、2のデモと同じ方法です。
|
1 2 3 4 5 6 7 |
<div class="parent"> <div class="child"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> <div class="child">Contrary to popular belief, Lorem Ipsum is not simply random text.</div> <div class="child">Lorem Ipsum is simply dummy text.</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
.parent { display: flex; align-items: flex-start; } .child { flex-grow: 1; flex-basis: 0; } |
4. Flexboxで実装するコンテンツに合わせて幅を調整できるカード
カードには流動的な幅だけでなく、コンテンツに応じたサイズのカードが必要になることもあります。下記のデモページで、テキスト量を変更したりスクリーンサイズを変更してみてください。右側のカードはテキスト量と一緒に大きくなり、親コンテナの幅が狭くなってもカードは一定の幅より狭くならないのが分かると思います。左側のカードは、親コンテナが狭くなるとそれに合わせて狭くなります。
See the Pen
Flexbox Child with No Shrink by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
この効果を適用するには、その子要素（span class="marker1">.child:last-child）にflex-shrink: 0;を与えます。意味は、「何があっても縮小しないでください」です。デフォルトでは、この値は1になっています。
|
1 2 3 4 |
<div class="parent"> <div class="child">1</div> <div class="child">Lorem Ipsum is simply dummy print text.</div> </div> |
|
1 2 3 4 5 6 7 |
.parent { display: flex; } .child:last-child { flex-shrink: 0; } |
5. Flexboxで中央揃え
Flexboxで画像やテキストを天地左右の中央に配置するには、親要素（.parent）にいくつかのCSSを適用するだけです。ここでは、2枚のカードを中央に配置します。
See the Pen
Flexbox Centered Items by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
flex-direction: column;の代わりに、rowでも同じ結果になります。
|
1 2 3 4 |
<div class="parent"> <div class="child">1</div> <div class="child">2</div> </div> |
|
1 2 3 4 5 6 |
.parent { display: flex; align-items: center; justify-content: center; flex-direction: column; } |
6. Flexboxで実装する価格表のカード
サービスやプランの価格表でよく使用されるレイアウトです。2番目のカードは一番お勧めのプランやサービスで、Flexboxで簡単に実装できます。デモでは、すべてのカードが親コンテナ内の垂直方向の中央に配置され、2番目のカードは高さを100%にしています。
See the Pen
Flexbox Item Full Height by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
このコードで注目すべき点は、3つあります。
1. 親は垂直に配置されたアイテムと一緒に直接または間接的に高さを定義する。
2. flex-grow: 1;で子要素（.child）が水平方向のスペースを埋めるようにする。
3. aiign-self: stretch;で2番目のカードが垂直方向のスペースを埋めるようにする。
|
1 2 3 4 5 |
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.parent { display: flex; align-items: center; height: 300px; /* or whatever make sense */ } .child { flex-grow: 1; } .child:nth-child(2) { align-self: stretch; } |
7. Flexboxで実装する2つのサイドバーを備えた3列レイアウト
Flexboxはカードの配置だけでなく、Webページのレイアウトにも非常に便利です。
下記のデモでは、コンテンツエリアの両サイドに2つのサイドバーがあります。
See the Pen
Flexbox Middle Item Stretch by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
コンテンツエリア（2番目のFlexアイテム）の幅を広くしたいので、flex-grow: 1;を与えています。これにより、スクリーンのサイズに応じて、コンテンツエリアの幅が変化します。実際のプロジェクトで使用する際は、サイドバーの幅を明示的に定義する必要があるかもしれません。
|
1 2 3 4 5 |
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> |
|
1 2 3 4 5 6 7 |
.parent { display: flex; } .child:nth-child(2) { flex-grow: 1; } |
8. Flexboxで実装するヘッダ・コンテンツ・フッタを備えたレイアウト
ヘッダ・コンテンツ・フッタを備えてWebページのレイアウトもFlexboxで簡単に実装できます。7のデモを90度傾けて見てもいいかもしれませんが、違いは行が列になっています。
See the Pen
Flexbox Header, Body, Footer by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
行を列にするには、flex-direction: column;です。7のデモと同様に、ヘッダとフッタの高さを明示的に定義しても問題ありません。
|
1 2 3 4 5 |
<div class="parent"> <div class="child">Header</div> <div class="child">Content</div> <div class="child">Footer</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
.parent { display: flex; flex-direction: column; height: 100vh; /* or whatever make sense */ } .child:nth-child(2) { flex-grow: 1; } |
9. Flexboxで実装するヘッダ・フッタ・サイドバーを備えたレイアウト
このレイアウトは少し複雑で、ネストされたFlexboxアイテムが必要です。8のデモに少し手を加えます。
See the Pen
Flexbox Header, Sidebar, Content, Footer by Miroslav Nikolov (@moubi)
on CodePen.
実装コード
中央のセクション（.main）にはコンテンツとサイドバーがあり、そこにもdisplay: flex;があります。コンテンツ（.content）は、flex-grow: 1;によりスペースのほとんどを占めています。実際のプロジェクトで使用する際、幅や高さを明示的に定義しても問題ありません。
|
1 2 3 4 5 6 7 8 |
<div class="parent"> <div class="child">Header</div> <div class="main"> <div class="child">Sidebar</div> <div class="child content">Content</div> </div> <div class="child">Footer</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.parent { display: flex; flex-direction: column; height: 100vh; } .main { display: flex; flex-grow: 1; } .content { flex-grow: 1; } |
終わりに
ここで紹介したFlexboxのレイアウトは、が非常にシンプルなコードです。ネット上にある基礎知識に記載されているCSSを使えば、簡単に実現できます。
参考: CSS Flexbox の基礎知識と使い方をやさしく解説
Flexboxはさらに、より複雑なグリッドを実装することもできます。
以前はJavaScriptを使用しないと実装できなかったレイアウトでも、Flexboxだけで実装できます。
参考: CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
sponsors
