※以下で紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。
また、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定していますが、もちろん不要であればそれらは記述する必要はありません。
※ここでは基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介しています。
※実際の表示を確認できるデモを用意していますが、モバイル向けのスタイル指定などは基本的にしていないのでPCでの閲覧推奨です。（モバイルでもとりあえず確認は可能はできますが見難いと思います）
Flexboxを利用してよくあるレイアウトを実装したサンプル集 目次
1. 要素を両端に寄せる
特にヘッダーやフッターで利用する機会が多そうな、特定の要素をそれぞれ両端に配置する方法です。
以前であればfloatを使うとかposition: absolute;で配置するみたいなことをしていたのが、Flexboxを利用することで簡単に実装できるようになりました。
例えば、下記のようなHTMLがあったとします。
HTML
<div class="parent">
<div class="child-box"></div>
<ul class="child-list">
<li></li>
<li></li>
<li></li>
</ul>
</div>
このHTMLでdiv.child-boxを左端に、ul.child-listを右端に配置したいという場合は、CSSを下記のように親要素にdisplay: flex;を指定して子要素のいずれかにmarginのauto指定をする（このサンプルの場合はdiv.child-boxに指定）記述するだけで実装できます。
CSS
.parent {
display: flex;
}
.child-box {
margin-right: auto;
}
また、デモ下部にあるように一部を中央に配置しつつ、特定の要素をそれぞれ左右に配置させるという動きも容易に実装できます。
例えば、下記のようなHTMLがあったとします。
HTML
<div class="parent">
<div class="child-box"></div>
<ul class="child-list">
<li></li>
<li></li>
<li></li>
</ul>
<div class="child-box"></div>
</div>
このHTMLでひとつ目のdiv.child-boxを左端に、ふたつ目のdiv.child-boxを右端にそれぞれ配置し、ul.child-listを中央に配置したいという場合は、CSSは下記のような記述で実装できます。
CSS
.parent {
display: flex;
}
.child-list {
margin: 0 auto;
}
2. 要素を均等配置する
Flexboxのjustify-contentを利用することで子要素を簡単に均等配置することが可能で、具体的に指定する値としてはspace-between, space-around, space-evenlyの3種類があります。
違いとしてはspace-betweenは最初と最後の要素がそれぞれ端に寄りつつ残りの要素が均等配置され、space-aroundとspace-evenlyについては要素が端に寄らない点は同じですが、それぞれスペースのとり方が異なっています。
CSS
.space-between {
display: flex;
justify-content: space-between;
}
.space-around {
display: flex;
justify-content: space-around;
}
.space-evenly {
display: flex;
justify-content: space-evenly;
}
3. 片方固定で片方可変のレイアウト
基本となるレイアウトや画像とテキストのカラムなど何かと使える場面が多いもので、片方は横幅を指定せず可変になるようにして、もう片方は横幅が固定になるように幅指定したレイアウトを下記のようなHTMLとCSSで実装できます。
HTML
<div class="parent">
<div class="main"></div>
<div class="side"></div>
</div>
CSS
.parent {
display: flex;
}
.main {
flex: 1;
}
.side {
width: 200px;
}
実際の動きはデモでウィンドウ幅を変更してもらうと確認でき、.main（青背景の領域）はウィンドウ幅によって幅が変更されて行きますが、.side（赤背景の領域）の方は変更されていないのを確認できます。
4. orderで表示順を変更する
HTMLでは異なる並びで記述されているはずの要素を、orderを利用することで容易に任意の並び順に変更することができます。
これを利用することで、例えばレスポンシブだけど要素の表示位置が大きく異なっているためにPC表示用とSP表示用とでわざわざ要素を作成するとかpositionなどを駆使して頑張ってレイアウトするといった手間を減らせることができます。
ここでは使用例としてレイアウト表示を変更してみます。
まず、下記のようなHTMLがあったとします。
HTML
<div class="parent">
<div class="center">Center</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
上記のようなHTMLがあり、スマートフォンなどウィンドウサイズが小さいときはこの順番のまま表示させるけど、これをタブレット以上のときは左から「Left → Center → Right」という順で並んだ3カラム表示させたいというときは下記のようなCSSで実装することができ、HTMLの並びとは違う順番で要素を並べることができます。
CSS
@media (min-width:768px) {
.parent {
display: flex;
}
.left {
order: 1;
}
.center {
order: 2;
}
.right {
order: 3;
}
}
5. 簡易的なグリッドレイアウト
ここまで簡易的なものは使う場面は少ないと思いますが、各要素の横幅は指定せずにマージンのみ任意で設定し、あとは要素の数によって各要素の幅が変わるといった簡易的なグリッドレイアウトをFlexboxで実装する方法です。
HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child wide">wide</div>
<div class="child"></div>
</div>
上記のようなHTMLで各要素感のマージンを20px指定したい場合は、下記のようなCSSで実装できます。
また、.wideに指定されているように、flexの値を異なるものにすることで他の要素に比べて横幅を大きくすることができます。
CSS
.parent {
display: flex;
flex-wrap: nowrap;
margin: 0 calc(20px / 2 * -1);
}
.child {
flex: 1;
margin: 0 calc(20px / 2);
}
.wide {
flex: 2;
}
6. フッターをウィンドウ下部に表示
コンテンツが少ない場合でもフッターをウィンドウ下部に表示させる動きをFlexboxで実装する方法です。
以前であれば特にフッターコンテンツが可変の場合などにJavaScriptを用いる必要があったのものが、Flexboxを使えば下記のようにCSSのみ且つシンプルな記述で実装できます。
CSS
html,
body {
display: flex;
flex-direction: column;
}
body {
min-height: 100vh;
}
footer {
margin-top: auto;
}
ほとんどのブラウザはbody要素にのみdisplay: flex;とflex-direction: column;を記述すれば実装可能なのですが、IEだとこれでは実装できないのでhtmlにも同じように指定をします。（html要素を利用するのに問題がある場合は、body内にもうひとつ要素を追加して記述を一部変更するなどしてください。）
実際の表示は以下デモで確認できます。
7. 要素を上下左右中央に配置
Flexboxを利用すれば、親要素・子要素ともに幅や高さを指定したりpositionやmarginを使った指定をしなくとも、親要素へ下記のような記述をするだけで簡単に上下左右で中央配置することができます。
※下記の場合は.childを.parent領域内で上下中央に配置するというものです。
CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
}
8. 画像とテキストを横並びにして、テキストを上下左右中央に
デモのようによくある画像とテキストが横並びになっているレイアウトをFlexboxで実装する方法で、さらにテキストはテキスト領域内の上下左右中央に表示されるようにしたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<div class="item">
<div class="item-image"><img src="img.png"></div>
<div class="item-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
CSS
.item {
display: flex;
flex-wrap: nowrap;
}
.item-image {
width: 50%;
}
.item-text {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: center;
align-content: center;
align-items: center;
}
9. 画像の位置を交互に入れ替える
先ほどと同様に画像とテキストが横並びになっているレイアウトを実装しつつ、すべて同じ見栄えにはせずに一部画像とテキストの並びを逆にする方法です。
具体的には表示方向を指定できるflex-directionを利用し、基本的なコードはHTML・CSSともに「8. 画像とテキストを横並びにして、テキストを上下左右中央に」と同じものを使用して、そこへ:nth-child擬似クラスを併用する形で下記を追記します。
CSS
.item:nth-child(odd) {
flex-direction: row-reverse;
}
上記記述後に表示を確認すると、通常「画像 → テキスト」の順に並べられていたものが奇数のときに「テキスト → 画像」の順に変更されているのを確認できます。
10. 高さを揃える
以前はJavaScriptを利用したり、CSSでやるならdisplay: table;やdisplay: table-cell;など複数の要素に対してCSSを指定する必要がありましたが、Flexboxを使うことで下記のように非常に簡単に高さを揃えることができます。
※下記の場合は<div class="item"> ... </div>の高さを揃えることができます。
HTML
<div class="item-list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
</div>
CSS
.item-list {
display: flex;
align-items: stretch;
}
11. 特定の要素を下で揃える
先ほどの高さを揃えるレイアウトの応用で、デモのように各要素の高さを揃えつつ、さらに特定の要素を下で揃えて配置するというレイアウトをFlexboxで実装する方法です。
まずサンプルとして下記のようなHTMLがあったとします。
HTML
<div class="item-list">
<div class="item">
<div class="item-image"><img src="img.png"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<div class="item-btn"><a href="#">more</a></div>
</div>
・
・
・
</div>
このHTMLで.item-btnの要素を上のデモのようにテキスト量に関係なく下で揃えて表示させたいときは、CSSを下記のように記述します。
CSS
.item-list {
display: flex;
align-items: stretch;
}
.item {
display: flex;
flex-direction: column;
}
.item-btn {
margin-top: auto;
}
12. 特定の要素を右下に揃える
同じく各要素の高さを揃えつつ特定の要素の表示位置を揃える方法で、こちらはFlexboxを使ってボタンを右下に揃えて配置させる方法です。
まずサンプルとして下記のようなHTMLがあったとします。
HTML
<div class="item-list">
<div class="item">
<div class="item-image"><img src="img.png"></div>
<div class="item-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<div class="item-btn"><a href="#">more</a></div>
</div>
</div>
・
・
・
</div>
このHTMLで.item-btnの要素を上のデモのようにテキスト量に関係なく右下で表示されるようにしたいときは、CSSを下記のように記述します。
CSS
.item-list {
display: flex;
align-items: stretch;
}
.item-text {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item-btn {
align-self: flex-end;
}
以上、Flexboxを利用してよくあるレイアウトを実装したサンプル集でした。
冒頭や記事内でも何度か触れていますが、以前はCSSでは実装できずJavaScriptを利用しないとできなかった見栄えが再現できるようになっていたり、沢山のCSSを記述しないとできなかったものが非常にシンプルな記述でできるようになっていたりと、改めて見返すと本当に便利だなと感じます。
既に多くの人が利用しているとは思いますが、まだFlexboxを多用してない・そこまで試していないという人でこういったレイアウトを実装する機会があれば是非使ってみてください。