• Top
• Category
• Contact
• About

サイト構築 -CSS

136

sponsorsr

CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。

CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。

Webページやスマホアプリに使用される定番レイアウトをCSS Flexboxで実装したシンプルなコードは、下記をご覧ください。

• Flexboxで実装する定番レイアウトのコードのまとめ

CSS flexboxとは

CSS flexboxの各プロパティを見る前に、flexboxとはどんなものか説明します。flexboxを使ったレイアウトとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。

flexboxを使ったレイアウトの概要図

上の図はflexレイアウトの概要と各プロパティで、さらに多くの情報はW3Cのflexbox modelを参考にしてください。

CSS flexboxは2009年の最初のドラフトから何度も変化しましたが、ここでは機能している最新のドラフト（CSS Flexible Box Layout Module Level 1: 2018年11月）をベースにします。

CSS flexboxのブラウザのサポート状況

• Internet Explorer 11+（10はプレフィックス「-ms-」が必要）
• Edge 12+（Edge 79からChromiumベースに）
• Chrome 29+（21-28まではプレフィックス「-webkit-」が必要）
• Firefox 28+（2-21まではプレフィックス「-moz-」が必要）
• Opera 17+（15-16まではプレフィックス「-webkit-」が必要）
• Safari 9+（6.1-8まではプレフィックス「-webkit-」が必要）
• Android 4.4+（2.1-4.3はプレフィックス「-webkit-」が必要）
• iOS Safari 9+（7-8.4まではプレフィックス「-webkit-」が必要）

2022年6月16日にIEのサポートが終了しました。プレフィックスが必要なのはIE10をサポートする場合のみなので、プレフィックスは実質不要です。

詳しいサポート状況は、下記ページをご覧ください。

flexのサポート状況 -Can I Use

IEでflexboxを使用する時の既知の問題

• IE 10ではプレフィックス「-ms-」が必要。
• IE 11では、3番目の引数に単位を追加する必要があります。flex-basisプロパティはMSFTのドキュメントを参照してください。
• IE 11でmin-heightを使用する場合、アイテムを垂直方向に正しく配置しません。Microsoft Docsを参照してください。
• IE10およびIE11では、display: flex;およびflex-direction: column;を持つコンテナは、コンテナにmin-heightがあり、明示的なheightプロパティがない場合はflexの子のサイズを適切に計算しません。Microsoft Connectを参照してください。
• IE10では、flexのデフォルト値は最新の仕様で定義されている0 0 autoではなく、0 1 autoです。

CSS flexboxの使い方

CSS flexboxを使うのは簡単です。
HTMLの親要素にdisplay: flex;を指定するだけです。

プレフィックス版も記しておきます。
※IE10（-ms-）をサポートする時のみ必要です。2023年現在、実質不要なので、これより下記はプレフィックス版は記載しません。

もしくは、インライン要素に使うのであればinline-flexを指定します。

display: flex;もしくはdisplay: inline-flex;は親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。

CSS flexboxは、2種類のプロパティで考えると簡単

CSS flexboxのプロパティを分類する方法はいくつかあります。ここでは最も簡単な方法として、一つはflexコンテナ、一つはflexアイテム、と二つのグループに分けてその使い方を説明します。

flexコンテナとflexアイテム

flexコンテナとは、flexアイテムを含む親要素です。まずは、flexコンテナの使い方から解説します。

flexコンテナ: flex-direction（横並びと縦並び）

flex-directionプロパティは、flexコンテナの主軸の方向を設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。

flex-directionプロパティで利用できる値

• flex-direction: row;（デフォルト値）
  左から右へ（ltr）水平方向に配置（dir属性で定義、デフォルトはltr）。
• flex-direction: row-reverse;
  rowと逆、右から左へ（rtl）水平方向に配置。
• flex-direction: column;
  上から下へ垂直方向に配置。
• flex-direction: column-reverse;
  columnと逆、下から上へ垂直方向に配置。

flexアイテムは左から右へ（ltr）水平方向に配置されます。

flex-direction: row;を定義した場合

flexアイテムは右から左へ（rtl）水平方向に配置されます。

flex-direction: row-reverse;を定義した場合

flexアイテムは上から下へ垂直方向に配置されます。

flex-direction: column;を定義した場合

flexアイテムは下から上へ垂直方向に配置されます。

flex-direction: column-reverse;を定義した場合

flex-directionのデフォルト値: row

rowとrow-reverseはライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。

flexコンテナ: flex-wrap（単一行と複数行の指定）

flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。そこから進化し、flex-wrapプロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrapプロパティで利用できる値

• flex-wrap: nowrap;（デフォルト値）
  単一行に配置、アイテムは幅に収まるように縮小される。
• flex-wrap: wrap;
  複数行に配置、左から右へ、上から下へ、の順番に。
• flex-wrap: wrap-reverse;
  複数行に配置、左から右へ、下から上へ、の順番に。

flexアイテムは横一行に配置されます。各アイテムの幅はflexコンテナの幅に収まるように縮小されます。

flex-wrap: nowrap;を定義した場合

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。

flex-wrap: wrap;を定義した場合

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、下から上へ、の順番に配置されます。

flex-wrap: wrap-reverse;を定義した場合

flex-wrapのデフォルト値: nowrap

これらのプロパティはライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。

flexコンテナ: flex-flow（並びと単一・複数行を一緒に定義）

flex-flowプロパティは、flex-directionとflex-wrapを設定するショートハンドです。

flex-flowプロパティで利用できる値

• flex-flow: row nowrap;（デフォルト値）
  flex-directionのrowとflex-wrapのnowrapを一緒に定義。

flex-flowのデフォルト値:row nowrap

flexコンテナ: justify-content（寄せと間隔）

justify-contentプロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。

justify-contentプロパティで利用できる値

• justify-content: flex-start;（デフォルト値）
  アイテムを先頭に寄せて配置。
• justify-content: flex-end;
  アイテムを後尾に寄せて配置。
• justify-content: center;
  アイテムを中央に寄せて配置。
• justify-content: space-between;
  先頭と後尾は端に、残りは等間隔に配置。
• justify-content: space-around;
  すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔。
• justify-content: space-evenly;
  すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔。
• justify-content: stretch;
  すべてのアイテムを等間隔に配置。サイズがautoであるアイテムはコンテナに合わせて引き延ばす。

flexアイテムはモードに従い、flexコンテナの左側に配置されます。

justify-content: flex-start;を定義した場合

flexアイテムはモードに従い、flexコンテナの右側に配置されます。

justify-content: flex-end;を定義した場合

flexアイテムはflexコンテナの中央に配置されます。

justify-content: center;を定義した場合

flexアイテムは最初と最後のアイテムは端に、残りは等間隔で配置されます。

justify-content: space-between;を定義した場合

flexアイテムは全てのアイテムは等間隔に配置されます。

justify-content: space-around;を定義した場合

justify-contentのデフォルト値:flex-start

flexコンテナ: align-items（アイテムの配置方法）

flexアイテムはflexコンテナのクロス軸に垂直方向で配置することができます。align-itemsプロパティは、デフォルトで全てのflexアイテムを含めます。
※flexアイテム: align-selfが定義してあれば、align-itemsは上書きされます。

align-itemsプロパティで利用できる値

• align-items: stretch;（デフォルト値）
  アイテムをコンテナの高さ（または幅）いっぱいに配置。
• align-items: flex-start;
  アイテムを先頭にまとめて配置。
• align-items: flex-end;
  アイテムを後尾にまとめて配置。
• align-items: center;
  アイテムを中央にまとめて配置。
• align-items: baseline;
  アイテムをベースラインに沿って配置。

flexアイテムはflexコンテナの高さ（または幅）いっぱいに配置されます。

align-items: stretch;を定義した場合

flexアイテムはflexコンテナのクロス軸の始点に配置されます。

align-items: flex-start;を定義した場合

flexアイテムはflexコンテナのクロス軸の終点に配置されます。

align-items: flex-end;を定義した場合

flexアイテムはflexコンテナのクロス軸の中央に配置されます。

align-items: center;を定義した場合

flexアイテムはベースラインに沿って配置されます。

align-items: beseline;を定義した場合

align-itemsのデフォルト値:stretch

ベースラインがどのように計算されるかは、W3Cのflex-baselinesを参考にしてください。

flexコンテナ: align-content（垂直方向の寄せと間隔）

align-contentプロパティはjustify-contentと似ていますが、align-contentプロパティはクロス軸の垂直方向に揃えて配置します。

align-contentプロパティで利用できる値

• align-content: stretch;（デフォルト値）
  すべてのアイテムを等間隔に配置。サイズがautoであるアイテムはコンテナに合わせて引き延ばす。
• align-content: flex-start;
  アイテムを先頭に寄せて配置。
• align-content: flex-end;
  アイテムを後尾に寄せて配置。
• align-content: center;
  アイテムを中央に寄せて配置。
• align-content: space-between;
  先頭と後尾は端に、残りは等間隔に配置。
• align-content: space-around;
  すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔。
• align-content: space-evenly;
  すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔

flexアイテムは均等に分配されたスペースが全てのflexアイテムのあとについて配置されます。

align-content: stretch;を定義した場合

flexアイテムはflexコンテナのクロス軸の始点に向かって積み重なります。

align-content: flex-start;を定義した場合

flexアイテムはflexコンテナのクロス軸の終点に向かって積み重なります。

align-content: flex-end;を定義した場合

flexアイテムの行はflexコンテナのクロス軸の中心に積み重なります。

align-content: center;を定義した場合

flexアイテムの行はflexコンテナの始点から終点に等間隔で表示されます。

align-content: space-between;を定義した場合

flexアイテムはflexアイテムの全ての行の周りに等間隔で表示されます。

align-content: space-around;を定義した場合

align-contentのデフォルト値:stretch

このプロパティはflexコンテナが複数行のflexアイテムをもっている時だけ効果があります。もしflexアイテムが一行だった場合は、レイアウトに影響を与えません。

メモ: flexコンテナ

• 全てのcolumn-*プロパティはflexコンテナに影響を与えません。
• ::first-line,::first-letterなどの疑似要素はflexコンテナに適用されません。

flexコンテナの子要素が、flexアイテムです。

flexコンテナとflexアイテム

flexアイテムの使い方を解説します。

flexアイテム: order（アイテムを並べる順番を設定）

orderプロパティは、flexコンテナ内に配置されるflexコンテナの子の順番をコントロールします。

orderプロパティで利用できる値

• order: 0;（デフォルト値）
• order: <整数値>
  正・負・0のいずれかを定義、値の昇順に配置。

flexアイテムはHTMLの並び順を変えずに、このシンプルなプロパティで変更できます。

orderプロパティを定義した場合

orderのデフォルト値:0

flexアイテム: flex-grow（アイテムの伸長係数の比率）

flex-growプロパティは、フリーのポジティブなスペースがある場合にflexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定します。

flex-growプロパティで利用できる値

• flex-grow: 0;（デフォルト値）
• flex-grow: <数値>
  整数または小数部分のある数値、マイナスの値は無効。

flex-growの値を同じに指定すると、全てのflexアイテムは同じサイズになります。

flex-grow: 1;を定義した場合

2番目のflexアイテムだけ値を変えると、他のアイテムに比べて多くのスペースを取ります。

2番目にflex-grow: 3;を定義した場合

flex-growのデフォルト値:0

マイナスの値は無効です。

flexアイテム: flex-shrink（アイテムの縮小係数の比率）

flex-shrinkプロパティは、フリーのネガティブなスペースにflexコンテナ内のflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。

flex-shrinkプロパティで利用できる値

• flex-shrink: 1;（デフォルト値）
• flex-shrink: <数値>
  整数または小数部分のある数値、マイナスの値は無効。

デフォルトで全てのflexアイテムは縮小することができます。しかし0に指定した場合は、オリジナルのサイズを維持します。

2番目にflex-shrink: 0;を定義した場合

flex-shrinkのデフォルト値:1

マイナスの値は無効です。

flexアイテム: flex-basis（アイテムの初期サイズを定義）

flex-basisプロパティは、flexアイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にします。

flex-basisプロパティで利用できる値

• flex-basis: auto;（デフォルト値）
• flex-basis: <width>
  幅（px,emなど）、キーワード（max-content,min-content,fit-content）を指定。

4番目のflexアイテムのflex-basisを350pxに指定し、残りは最初の大きさに従います。

4番目にflex-basis: 350px;を定義した場合

flex-basisのデフォルト値:auto

autoの値はネーミングの問題がありますが、将来解決される予定です。

flexアイテム: flex（伸長係数・縮小係数・初期サイズを定義）

flexプロパティは、flex-grow,flex-shrink,flex-basisのショートハンドです。auto 1 1 auto,0 0 autoといった指定ができます。

flexプロパティで利用できる値

• flex: 0 1 auto;（デフォルト値）
  flex-grow,flex-shrink,flex-basisを一緒に定義。

flexのデフォルト値:0 1 auto

W3Cはこのflexを使ったショートハンドの記述を別個で使うより奨励しています。参考：flex-common

flexアイテム: align-self（アイテムの配置方法）

align-selfプロパティは前述の「align-items」での指定を上書きし、flexアイテムの整列を優先します。

align-selfプロパティで利用できる値

• align-self: auto;（デフォルト値）
• align-self: キーワードを指定;

3番目と4番目のflexアイテムはalign-selfプロパティを使い配置しています。

align-selfプロパティを定義した場合

align-selfのデフォルト値:auto

align-selfのautoの値は、その要素の親のalign-itemsの値を元に計算します。

メモ: flexアイテム

• floatやclearやvertical-alignはflexアイテムに影響を与えません。

Related Posts

coliss