日本語対応!CSS Flexboxのチートシートを作ったので配布します

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います!

↑私が10年以上利用している会計ソフト!

動画で学ぶCSS Flexbox


この記事はYouTube動画でも解説しています。動画派の方はこちらをどうぞ!

CSS Flexboxチートシートをダウンロード

CSS Flexboxチートシート
PC・Macに保存してチラ見するなり、印刷してデスクに置いておくなりしてご利用ください!

Flexbox チートシートPDFのダウンロード

CSS Flexbox 目次

  1. Flexboxの基本的な書き方
  2. flex-direction … 子要素の並ぶ向き
  3. flex-wrap … 子要素の折り返し
  4. flex-flow … flex-directionとflex-wrapをまとめて指定
  5. justify-content … 水平方向の揃え
  6. align-items … 垂直方向の揃え
  7. align-content … 複数行にした時の揃え
  8. order … 順序の指定
  9. flex-grow … 子要素の伸びる比率
  10. flex-shrink … 子要素の縮む比率
  11. flex-basis … 子要素のベースとなる幅の指定
  12. flex … flex-grow、flex-shrink、flex-basisをまとめて指定
  13. align-self … 子要素の垂直方向の揃え
  14. Flexbox チートシートPDFのダウンロード
  15. Flexbox関連記事

Flexboxの基本的な書き方

Flexboxの構成
まずはFlexboxレイアウトの基本的な書き方をマスターしましょう。Flexコンテナーと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れてHTMLは完了です。

以下の例では親要素である「container」というクラスのついた div の中に、子要素である「item」というクラスのついた div が入っています。

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

Flexbox 子要素
子要素が縦に並んでいる状態です。

Flexboxを使って子要素を横並びにするには、親要素に display: flex; を指定するだけOK。

.container {
  display: flex;
}


子要素が横並びになりました!

インライン要素に使うのであれば、親要素に display: inline-flex; を指定します。

.container {
  display: inline-flex;
}

CSS Flexbox 目次へ

親要素(Flexコンテナー)に指定するプロパティ

Flexbox 親要素
Flexboxで親要素に指定するプロパティと子要素に指定するプロパティが存在します。指定する要素を間違えないように注意しましょう。まずは親要素のものをまとめました。

flex-direction … 子要素の並ぶ向き

flexbox flex-direction
子要素をどの方向に配置していくかを指定するプロパティー。横または縦に配置できます。

flex-directionの使用例

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

flex-directionで使える値

  • row(初期値)… 子要素を左から右に配置
  • row-reverse … 子要素を右から左に配置
  • column … 子要素を上から下に配置
  • column-reverse … 子要素を下から上に配置

※「row」と「row-reverse」はRTL(Right To Left = 右から左)の時は逆向きに配置されます。
CSS Flexbox 目次へ

flex-wrap … 子要素の折り返し

flexbox flex-wrap
子要素を一行、または複数行に並べるかを指定します。複数行にする場合は子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていきます。

flex-wrapの使用例

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

flex-wrapで使える値

  • nowrap(初期値)… 子要素を折り返しせず、一行に並べる
  • wrap … 子要素を折り返し、複数行に上から下へ並べる
  • wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる

flex-flow … flex-directionとflex-wrapをまとめて指定

flex-directionflex-wrap を一行で指定できるプロパティー。初期値は row nowrap

flex-flowの使用例

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

CSS Flexbox 目次へ

justify-content … 水平方向の揃え

flexbox justify-content
親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定します。

justify-contentの使用例

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

justify-contentで使える値

  • flex-start(初期値)… 行の開始位置から配置。左揃え。
  • flex-end … 行末から配置。右揃え。
  • center … 中央揃え
  • space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
  • space-around … 両端の子要素も含め、均等に間隔をあけて配置

※「flex-start」と「flex-end」はRTL(Right To Left = 右から左)の時は逆向きに配置されます。
CSS Flexbox 目次へ

align-items … 垂直方向の揃え

flexbox align-items
親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。

align-itemsの使用例

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

align-itemsで使える値

  • stretch(初期値)… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
  • flex-start … 親要素の開始位置から配置。上揃え。
  • flex-end … 親要素の終点から配置。下揃え。
  • center … 中央揃え
  • baseline … ベースラインで揃える

CSS Flexbox 目次へ

align-content … 複数行にした時の揃え

flexbox align-content
子要素が複数行に渡った場合の垂直方向の揃えを指定します。flex-wrap: nowrap; が適応されていると子要素が一行になるので、align-content は無効になります。

align-contentの使用例

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

align-contentで使える値

  • stretch(初期値)… 親要素の高さに合わせて広げて配置
  • flex-start … 親要素の開始位置から配置。上揃え。
  • flex-end … 親要素の終点から配置。下揃え。
  • center … 中央揃え
  • space-between … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
  • space-around … 上下端にある子要素も含め、均等に間隔をあけて配置

CSS Flexbox 目次へ

子要素(Flexアイテム)に指定するプロパティ


display: flex; が指定された要素の中にある子要素(Flexアイテム)に指定するプロパティーです。親要素に display: flex; が指定されていないと動作しないので注意しましょう。

order … 順序の指定


通常子要素はHTMLの記述順に配置されますが、order プロパティーを使えば任意の順で並べ替えられます。

orderの使用例

.item1 { order: 2; }
.item2 { order: 3; }
.item3 { order: 1; }

orderで使える値

初期値は0。マイナス値を含む数値のみ指定できます。
CSS Flexbox 目次へ

flex-grow … 子要素の伸びる比率


親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定します。

flex-growの使用例

.item1 { flex-grow: 2; }
.item2 { flex-grow: 3; }
.item3 { flex-grow: 1; }

flex-growで使える値

数値のみ指定できます。初期値は0。マイナス値は無効です。
CSS Flexbox 目次へ

flex-shrink … 子要素の縮む比率


flex-grow と逆で、親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。

flex-shrinkの使用例

.item1 { flex-shrink: 2; }
.item2 { flex-shrink: 3; }
.item3 { flex-shrink: 1; }

flex-shrinkで使える値

数値のみ指定できます。初期値は1。マイナス値は無効です。
CSS Flexbox 目次へ

flex-basis … 子要素のベースとなる幅の指定

子要素に対し width と同じように幅の値を指定できます。auto と指定した場合は子要素のコンテンツのサイズが適応されます。

flex-basisの使用例

.item1 { flex-basis: auto; }
.item2 { flex-basis: 200px; }
.item3 { flex-basis: 30%; }

flex-basisで使える値

初期値は auto 。幅や高さの指定と同様、パーセンテージやピクセル値で指定できます。
CSS Flexbox 目次へ

flex … flex-grow、flex-shrink、flex-basisをまとめて指定

flex-growflex-shrinkflex-basis の3つのプロパティーを一行で指定できます。初期値は 0 1 auto

flexの使用例

.item1 {
  flex: 0 1 30%;
}

CSS Flexbox 目次へ

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


親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。親要素に指定する align-items と全く同じ機能ですが、こちらは子要素に対して指定します。この align-self での指定は、親要素に記述する align-items よりも優先されます。

align-selfの使用例

.item1 {
  align-self: flex-end;
}

align-selfで使える値

  • auto(初期値)… 親要素の align-items の値を継承
  • stretch … 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
  • flex-start … 親要素の開始位置から配置。上揃え。
  • flex-end … 親要素の終点から配置。下揃え。
  • center … 中央揃え
  • baseline … ベースラインで揃える

CSS Flexbox 目次へ

Flexbox チートシートPDFのダウンロード

PDFファイルは個人利用のみOK、再配布不可。ダウンロードするにはWebクリエイターボックスの無料ニュースレターへのご登録が必要です。

CSS Flexbox チートシート

まだご登録がお済みでない方はこちらのフォームからご登録ください。

プライバシーポリシーに基づき、スパムメールを送信したり、メールアドレスを第三者に譲渡・売買などは一切いたしません。

Webクリエイターボックスのニュースレターは、どのタイミングであっても配信停止ができます。配信停止を希望する方は、ニュースレターのフッターにある「配信停止」リンクをクリックしてください。

Flexbox関連記事

CSS Flexbox 目次へ

シェアする

コメント

“日本語対応!CSS Flexboxのチートシートを作ったので配布します” への11件のフィードバック

  1. ok.2nd より:

    「ブロック全体はページ内で左右中央揃えし、ブロック内の複数画像は左寄せする。」というのをCSSのみで実現できますか?justify-content: center;やalign-content: flex-start;を組み合わせて試してみましたが、うまくいきません。JavaScriptを使っての実現方法は以下のブログに載せています。
    ≪写真/画像をサムネイル一覧するHTMLサンプル(ブロック全体は中央揃え+中の複数画像は左寄せ)≫
    http://2ndart.hatenablog.com/entry/2017/03/13/143736

  2. うーん、いろいろ試してみましたが、やはり左揃えとなるとJS使わないと難しそうですね…。CSSだけだと、制作されていた object-fit:contain; を使ったものに行き着く気がします。お力添えできず申し訳ないです…!

  3. ok.2nd より:

    いろいろと試していただき、ありがとうございます。やはり、駄目ですか。普通に需要がありそうなレイアウトだと思うのですが、残念です。重ねてありがとうございました。

  4. toaster より:

    このようなことでしょうか。
    http://blog.webcreativepark.net/2016/08/15-125202.html

  5. ok.2nd より:

    カラム数限定ではなく、任意の要素数でかつ、PCでウインドウサイズをリサイズしても、追随する事が条件です。
    JavaScriptを使ったサンプルページは以下です。
    http://home2nd.html.xdomain.jp/thumbnail-sample-img-contain.html

  6. 和草イデハナ より:

    横から失礼します。https://codepen.io/mzkr6/pen/gmVWOa
    これで container の幅は Media Queries で調整してもらってというのではダメなのでしょうか?

  7. ok.2nd より:

    横幅固定でなく、PCでウインドウサイズをリサイズしても、追随する事が条件です。
    基本的に横幅はウインドウサイズからはみ出しません。ウインドウをリサイズしたら、それに合わせて横のカラム数は4カラム、3カラム、2カラムと自動的に変化します。その状況において、コンテナ全体としては中央揃え、中の要素が横のカラム数の整数倍でなければ、コンテナの中の一番下の要素は左揃えということです。下のサンプルと同様にレスポンシブにレイアウトが変化することが条件です。
    http://home2nd.html.xdomain.jp/thumbnail-sample.html

  8. 和草イデハナ より:

    そのリサイズに関してなのですが、中のアイテム1個の横幅自体はウインドウをリサイズしても変化しませんよね?JSのサンプルで出されていたものは240pxと設定されていましたし、それであれば2カラムの場合は480px、3カラムの場合は720pxと自ずと求められるので、Media Queriesで考えられるcontainerの横幅のパターン分だけ記述すれば、リサイズに合わせて動的に変化させられると思うのですが・・・。

  9. ok.2nd より:

    和草イデハナさん、ありがとうございます。
    教えていただいた方法で実現できることが分かりました。素晴らしい。
    以下がそのサンプルです。
    http://home2nd.html.xdomain.jp/thumbnail-sample-media-queries.html
    ブログにも記事として書かせて頂きました。
    http://2ndart.hatenablog.com/entry/2017/04/11/193206
    重ねてありがとうございました。

  10. foomin10 より:

    flex-shrink の画像が間違ってると思います。
    《.item2 は “flex-shrink: 3;”》

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)