【CSS Flexbox】フレックスボックスの使い方と応用方法について解説

皆さんは、CSSで横並びや縦並びのレイアウトを作る時に便利なFlexbox(フレックスボックス)の使い方は、ご存知でしょうか？

Flexboxは、オプションとして付け加えられるプロパティが多いため、その名前の通り、とてもフレキシブル(柔軟)にレイアウトを組むことができます。

今までは、慣れていたからfloatで横並びのレイアウトを作っていたという方でも、Flexboxの使い方を覚えてしまうと、今後は使わずにはいられなくなることでしょう。

とは言っても、使えるプロパティが多いため、慣れるまで少し時間がかかるかと思いますので、覚えるのが難しい人は、このチートシートをブックマークして、いつでも確認できるようにしておくと良いでしょう。

それでは、Flexboxの基本的な使い方と応用方法について解説していきたいと思います。

コーディングお役立ちツール

• HTML整形ツール
• CSS整形ツール
• JavaScript整形ツール
• JSON整形ツール
• WebP相互変換ツール
• アスペクト比計算ツール

CSS Flexboxで何ができるのか

CSSのFlexboxを使うことによって、要素の縦横の配置する間隔を変えたり、配置順を変更したり、比率を変更したりと言うことが少ないコードで行うことができるので、デザインを変えたい場合や、急な仕様の変更時でも柔軟に対応できるメリットがあります。

例えば、画像のギャラリーページを作りたい場合に、Flexboxを使うことによって、大きさが不確定な画像が入ってきたとしても、比率を調節したりして違和感なくレイアウト上に、はめ込むことが出来ます。

このように、Flexboxを汎用性に優れているため従来のfloatプロパティでは、実現が困難であった複雑なレイアウトを簡単に作ることができます。

Flexboxで出来るレイアウトを見る

CSS Flexboxの基本的な使い方

まず、Flexboxでレイアウトを組み場合は、Flexアイテム(子要素)と、それを包含するためのFlexコンテナー(親要素)を作る必要があります。

今回の場合ですと、親要素として「flex_container」というクラスと、子要素として「flex_item」というクラスのdiv要素でレイアウト組んでいます。

そして、以下のようにHTMLとCSSを記述することによって、Flexboxを適用することができます。

ただし、Flexboxを使う際の指定方法は、二種類存在しますので、その点も合わせて確認しておきましょう。

HTML

<div class="flex_container">
    <div class="flex_item">item01</div>
    <div class="flex_item">item02</div>
    <div class="flex_item">item03</div>
</div>

CSS

display: flex;

.flex_container {
    display: flex;
}

display: inline-flex;

.flex_container {
    display: inline-flex;
}

親要素に使えるプロパティ

flex-direction (子要素の並ぶ向き)

flex-directionのレイアウトを見る

flex-direction: row; (デフォルト)

.flex_container {
    display: flex;
    flex-direction: row;
}

flex-direction: row-reverse; (逆順に横並び)

.flex_container {
    display: flex;
    flex-direction: row-reverse;
}

flex-direction: column; (縦並び)

.flex_container {
    display: flex;
    flex-direction: column;
}

flex-direction: column-reverse; (逆順に縦並び)

.flex_container {
    display: flex;
    flex-direction: column-reverse;
}

flex-wrap (子要素の折り返し方)

flex-wrapのレイアウトを見る

flex-wrap: nowrap; (デフォルト)

.flex_container {
    display: flex;
    flex-wrap: nowrap;
}

flex-wrap: wrap; (はみ出したアイテムを折り返す)

.flex_container {
    display: flex;
    flex-wrap: wrap;
}

flex-wrap: wrap-reverse; (はみ出したアイテムを逆順に折り返す)

.flex_container {
    display: flex;
    flex-wrap: wrap-reverse;
}

justify-content (水平方向の並び方)

justify-contentのレイアウトを見る

justify-content: flex-start; (デフォルト)

.flex_container {
    display: flex;
    justify-content: flex-start;
}

justify-content: flex-end; (右寄せで横並び)

.flex_container {
    display: flex;
    justify-content: flex-end;
}

justify-content: center; (中央に横並び)

.flex_container {
    display: flex;
    justify-content: center;
}

justify-content: space-between; (最初と最後のアイテムを両端に配置して、残りは均等に横並び)

.flex_container {
    display: flex;
    justify-content: space-between;
}

justify-content: space-around; (均等に横並び)

.flex_container {
    display: flex;
    justify-content: space-around;
}

align-items (垂直方向の並び方)

align-itemsのレイアウトを見る

align-items: stretch; (デフォルト：縦幅いっぱいに伸ばす)

.flex_container {
    display: flex;
    align-items: stretch;
}

align-items: flex-start; (縦に上揃え)

.flex_container {
    display: flex;
    align-items: flex-start;
}

align-items: flex-end; (縦に下揃え)

.flex_container {
    display: flex;
    align-items: flex-end;
}

align-items: center; (縦に中央揃え)

.flex_container {
    display: flex;
    align-items: center;
}

align-items: baseline; (ベースラインに揃える)

.flex_container {
    display: flex;
    align-items: baseline;
}

align-content (複数行の並び方)

align-contentのレイアウトを見る

align-content: stretch; (デフォルト：Flexコンテナーの縦幅いっぱいに伸ばす)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

align-content: flex-start; (Flexコンテナーの開始位置に上揃え)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

align-content: flex-end; (Flexコンテナーの終わり位置に下揃え)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

align-content: center; (Flexコンテナーの縦中央に揃える)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

align-content: space-between; (最初と最後の要素を上下に配置して、それ以外は均等に配置)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

align-content: space-around; (縦に均等配置)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

子要素に使えるプロパティ

order (子要素の並ぶ順番の入れ替え方)

.flex_container
.flex_item:ntn-of-type(1) {
    order: 1;
}

.flex_container
.flex_item:ntn-of-type(2) {
    order: 0;
}

.flex_container
.flex_item:ntn-of-type(3) {
    order: -1;
}

orderのレイアウトを見る

flex-grow (子要素の横幅の比率の変え方)

.flex_container
.flex_item:ntn-of-type(1) {
    flex-grow: 1;
}

.flex_container
.flex_item:ntn-of-type(2) {
    flex-grow: 2;
}

.flex_container
.flex_item:ntn-of-type(3) {
    flex-grow: 4;
}

flex-growのレイアウトを見る

flex-shrink (子要素の横幅の縮む比率の変え方)

.flex_container
.flex_item:ntn-of-type(1) {
    flex-shrink: 3;
}

.flex_container
.flex_item:ntn-of-type(2) {
    flex-shrink: 3;
}

.flex_container
.flex_item:ntn-of-type(3) {
    flex-shrink: 4;
}

flex-shrinkのレイアウトを見る

flex-basis (子要素の基準となる横幅の指定)

.flex_container
.flex_item:ntn-of-type(1) {
    flex-basis: 80%;
}

.flex_container
.flex_item:ntn-of-type(2) {
    flex-basis: auto;
}

.flex_container
.flex_item:ntn-of-type(3) {
    flex-basis: 200px;
}

flex-basisのレイアウトを見る

align-self (子要素の垂直方向の揃え方)

align-selfのレイアウトを見る

align-self: auto; (デフォルト)

.flex_container
.flex_item {
    align-self: auto;
}

align-self: flex-start; (Flexコンテナーの開始位置に上揃え)

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: flex-start;
}

align-self: flex-end; (Flexコンテナーの終わり位置に下揃え)

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: flex-end;
}

align-self: center; (Flexコンテナーの縦中央揃え)

.flex_container {
    display: flex;
}

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: center;
}

align-self: stretch; (Flexコンテナーの縦幅いっぱいに伸ばす)

.flex_container
.flex_item {
    align-self: stretch;
}

align-self: baseline; (ベースラインに揃える)

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: baseline;
}

CSS Flexboxの応用方法

Flexboxは使えるプロパティが多くて便利なのですが、コードが少し長めの書き方になりやすい傾向があるので、省略して書きたい場合があるかと思います。

そんな時に使える、別のプロパティを紹介したいと思います。

詳しくは、下記をご覧ください。

「flex-direction、flex-wrap」を同時に使う

flex-flow

.flex_container {
    display: flex;
    flex-flow: row wrap;
}

「flex-grow、flex-shrink、flex-basis」を同時に使う

flex

.flex_container
.flex_item {
    flex: 2 1 50%;
}

まとめ

今回は、Flexboxの基本的な使い方と応用方法について解説してきましたが、いかがでしたでしょうか？

横並びや縦並びのレイアウトを組む時は、Flexboxが最適であることが分かっていただけたかと思います。

もう、使い慣れてるからと言って、わざわざfloatを使うこともなくなることでしょう。

ですが、Flexboxの全ての使い方を記憶するのは、少々大変かと思いますので、よく使うプロパティだけ覚えておいて、あとは検索するなどして、その時々で思い出しながら使うのが、ちょうど良いでしょう。

それでは、皆さん良いコーディングライフを！