プロはこうやって使ってる！制作現場でよく使われるFlexboxの実例5選

Flexbox、使っていますか？
機能がありすぎて使うのに躊躇してしまっていたり、正直あまり使いこなせていなかったりしていませんか？

私ははじめ、どのプロパティを使えば良いのか悩んで悩んで、結局使わずにfloatやdisplay: table;などを使ったりして使用を避けていましたが、使い始めたらとても便利でした。

Flexboxのプロパティには数多くの種類があってとっつくにくい印象を受けますが、実は実際の制作現場で使用するものはそこまで多くありません。

今回は、現場でよく使用するプロパティを、使用例とあわせてご紹介します。
これだけ覚えておけば、サイトを構築する上でほとんど不自由はないと思います。

この記事の目次

ヘッダー
2列のタイルレイアウト
3列のタイルレイアウト
画像とテキストを重ねる
異なるサイズの画像レイアウト
まとめ

ヘッダー

よくみるヘッダーのレイアウトですね。

上記は、装飾のCSSも含まれているので、レイアウトに必要な部分だけを抜粋するとこれだけで済みます。

header {
  display: flex; /* 横並びに */
  justify-content: space-between; /* 両端揃え */
  align-items: center; /* 上下中央揃え */
}
nav ul {
  display: flex; /* 横並びに */
}

よく見るレイアウトのヘッダーをFlexboxで実装する例は以下でご紹介しています。

2列のタイルレイアウト

レイアウトに必要な部分だけを抜粋します。

ul {
	display: flex; /* 横並びに */
	flex-wrap: wrap; /* 折り返し表示できるように */
}
ul li {
	flex-basis: 49%; /* 要素の幅指定 */
}
ul li:not(:nth-child(even)) {
	margin-right: 2%;
}

3列のタイルレイアウト

レイアウトに必要な部分だけを抜粋します。

ul {
	display: flex; /* 横並びに */
	flex-wrap: wrap; /* 折り返し表示できるように */
}
ul li {
	flex-basis: 32%; /* 要素の幅指定 */
}
ul li:not(:nth-child(3n)) {
	margin-right: 2%;
}

画像とテキストを重ねる

レイアウトに必要な部分だけを抜粋します。

.wrap {
    display: flex; /* 横並びに */
    align-items: center; /* 上下中央揃え */
}
figure {
    position: absolute;
    top: 0;
    right: 0;
}
.txt {
    flex-basis: 60%; /* 要素の幅指定 */
}

実際のサイトでは互い違いにして配置することが多いです。
HTMLの並び順を変えなくても「flex-direction」プロパティを使えば互い違いにすることができます。
詳しいやり方は以下でご紹介しています。

異なるサイズの画像レイアウト

レイアウトに必要な部分だけを抜粋します。
「flex-basis」は幅の指定なので、好きな値に変更して使用してください。

.wrap {
	display: flex; /* 横並びに */
	justify-content: space-between; /* 両端揃え */
}
.box {
	display: flex; /* 横並びに */
	flex-wrap: wrap; /* 折り返し表示できるように */
	justify-content: space-between; /* 両端揃え */
	flex-basis: 50%; /* 要素の幅指定 */
}
.box a {
	flex-basis: calc(100% - 20px); /* 要素の幅指定 */
	justify-content: center; /* 左右中央揃え */
	align-items: center; /* 上下中央揃え */
}
.box.small a {
	flex-basis: calc(50% - 10px); /* 要素の幅指定 */
}
.box.small a:nth-child(n+3) {
	margin-top: 20px;
}