プロはこうやって使ってる!制作現場でよく使われるFlexboxの実例5選 コーディング

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

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

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

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

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

スポンサーリンク

ヘッダー

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

上記は、装飾の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;
}
スポンサーリンク

まとめ

実際によく使用するケースをご紹介しました。
基本はこの5つを覚えておけば、あとは応用で対応できます。
Flexboxは今のレイアウトの基本なので、是非覚えておきましょう。

ブラウザによってベンダープレフィックスが必要になります。
2019年最新のベンダープレフィックスは下記記事をご覧ください。

「Flexbox」の関連記事一覧