CSSを学び始めた人のなかでも、flexboxでできることを知りたい人は多いのではないでしょうか。flexboxはfloatやインラインブロックよりも簡単で、あとからの修正にも強い、横並びレイアウトの新定番となっているレイアウトモジュールです。この記事では、flexboxの基本知識はもちろん、よく使う設定の意味や使い方なども解説しています。これを読めば、flexboxの活用方法を掴めることでしょう。

flexboxについて

まずは、flexboxの概要や基本知識などを紹介します。flexbox を使えば、javascriptや他のCSSプロパティを使うようなレイアウトもこれだけで設計でき、とても便利です。まずは基礎となる部分から学んでいきましょう。

そもそも「flexbox」とは？

flexboxとは、webサイトなどの装飾を行うCSSにおいて、短く柔軟なコードで配置を行うためのレイアウトモードのことです。CSS3から追加された比較的新しい機能であるためIE9以前など古いバージョンのブラウザには対応していませんが、現行のものであれば2019年時点ではほとんどのブラウザに対応しています。配置というと「float」「display」「margin」などのプロパティを使うのが一般的です。しかし、このようなプロパティは癖が強いため、ちょっとした設定ミスでもレイアウトが崩れがちです。

その点、flexboxのコードはシンプルで、CSSのみで要素内の配置や表示順序を変えることができます。また、要素間の幅の指定はもちろん、要素内の分量が異なる場合でも高さや幅を調整可能です。要素間の余白設定も簡単なので、より少ない時間でレイアウトを整えられます。

flexboxの構造・基本知識

CSS flexboxは、コンテナ（親要素）とアイテム（子要素）によって構成されています。コンテナの中に、さまざまなアイテムが入っているイメージです。flexbox使用時はHTMLファイルにコンテナ（f-container）を作成し、そのコンテナ内にアイテム（f-item）を作成します。flexboxの基本的な使い方は単純で、CSSファイルで親となるコンテナに「display:flex」を指定するだけです。この一行で、対象の要素がflexboxとなりました。レイアウトの細部を調整する際は通常のCSSと同様、コンテナとアイテムにプロパティを指定していきます。

Flexboxに関する用語

ここからは、flexboxに関する用語を解説します。flexboxを構成する要素であり、あとで紹介するプロパティの指定対象となるコンテナやアイテムなどについても、ここでしっかり取り上げています。実践時は、プロパティの解説と併せて参考にするとより効果的です。

Flexコンテナ（Flex Container）

コンテナとは、横並びにする要素を1つのグループとしてまとめたものです。flexboxに限らず、CSSでは重要な概念となります。flexboxでも基本的な考え方は変わらず、flexアイテムを含んだ親要素として全体の要となる存在です。flexboxレイアウトを使用する際は、このflexコンテナに「display:flex」を記述します。このdisplayプロパティの指定方法は2つあり「flex」または「inline-flex」です。「display:inline-flex」と設定すると、flexアイテムに幅を指定しなくても自動的にアイテム数に依存した幅が設定されます。

Flexアイテム（Flex Item）

flexアイテムは、flexコンテナの直下に組み込まれた子要素です。flexコンテナに指定したプロパティは、配置順や並べる行の数としてflexコンテナ全体に反映されます。一方、flexアイテムに指定したプロパティは、並び順や伸び縮み率など、そのflexアイテムだけが対象です。flexコンテナとflexアイテムのプロパティを使い分けることで、統一性を持たせながらもアイテム一つひとつに独自の特徴を与えることができます。また、flexコンテナ内で直下に続くテキストもflexアイテムの一種です。

Axis (軸)

flexboxのレイアウトは主軸 （main axis）と交差軸 （cross axis）によって決まります。flexアイテムを基準として、それに平行な軸が主軸です。一方、交差軸は主軸に垂直に交わる軸です。主軸はflex-directionプロパティの位置から決まり、さらにflex-directionプロパティの値を設定できるなど、flex-directionプロパティと密接な関係を持っています。主軸となる軸は、この設定値によって異なります。row系統の値を設定した際は、主軸はインライン要素の並ぶ方向に伸びる横軸、交差軸は列に沿った縦軸です。一方、主軸にcolumn系統の値を設定すると、columnの縦並び設定に従います。つまり、ブロック要素の並ぶ方向に伸びる軸が主軸、行の方向に延びる横軸が交差軸となるのです。

Direction (方向)

flexコンテナの両端となるmain start/main endとcross start/cross endは、Flexアイテムの流れの始点と終端を表します。文字表記の方向を指定するwriting-modeプロパティで定義することにより、主軸や交差軸に従ってflexアイテムが配置されるのです。writing-modeプロパティで設定できる値は、大きく2種類に分かれます。左から右へ水平に流れるhorizontal-tbと、上から下へ垂直に流れるverticalです。verticalはさらに、水平方向を右から左とするvertical-rlと、左から右とするvertical-lrに分かれます。また、コンテンツは上から下へ流し、さらに書体などを横倒しにするsidewaysという値もあります。sidewaysもrlかlrを末尾につけ、横倒しの方向を指定して使う値です。

Flexコンテナに使用可能なプロパティ

flexboxのプロパティは大きく分けて2種類、flexコンテナ用とflexアイテム用です。まずは、flexコンテナに適用するプロパティを解説します。flexコンテナに適用するプロパティはコンテナ内の全アイテムに適用されるため、これを使いこなせると作業効率が大きく上がります。

flex-direction

flexアイテムを並べる方向を指定し、主軸を定義するプロパティです。writing-modeプロパティと似ていますが、文字などのレイアウトだけでなく、flexアイテムを単位として全体的に方向が変わります。値は4種類あり、デフォルトの値はrowです。これは左端から右へ横並びさせる、一般的な横書きドキュメント形式となります。値の内訳は横並びさせるrowと縦並びさせるcolumn、そして起点を反対方向にするreverseの有無によるものです。row-reverseなら、横並びの起点が右端となり、左へと進んでいく状態になります。columnは縦書きの日本語のように、上から下へ縦並びさせるものです。column-reverseになると、縦並びの中でも下から上へと伸びていく独特なものになります。記述時は「flex-diretion: row;」などのように書きます。

flex-wrap

flexアイテムの折り返しとその方向を指定するプロパティです。折り返さずにflexアイテムを1行に収めるnowrapがデフォルト値として設定されています。flex-wrapプロパティの値は、コンテナの幅に収まらない場合に単純に折り返しを行うwrapと、逆方向に折り返すwrap-reverseを合わせた3種類です。nowrapの場合、あまりにflexアイテムが多いとアイテム同士が入り混じって見えることもあります。アイテムのサイズなどにもよりますが、4個程度をめどに折り返しを入れると良いでしょう。「flex-wrap:wrap;」などのように記述して利用します。

flex-flow

配置方向を変更するflex-directionプロパティと、折り返しの有無や方向を指定するflex-wrapプロパティを一括指定できる、便利なショートハンドプロパティです。「flex-flow: row wrap;」などのように、まずflex-directionプロパティを設定し、半角スペースを入力したうえで続けてflex-wrapプロパティを設定します。デフォルト値は「row nowrap」です。「flex-flow:wrap;」などのように、いずれかの値を省略することも可能です。その場合は初期値としてみなされます。どの言語においても、コーディングでは長いコードより少ない行数で同じ機能をシンプルにまとめているコードが好まれます。複数のプロパティをまとめておけば修正時も記述箇所がわかりやすいので、ショートハンドプロパティは積極的に利用してみましょう。

justify-content

主軸（main axis）方向の揃え方を定めるプロパティです。主軸に対するflexアイテムのレイアウトを定義します。「justify-content: flex-start;」のように記述し、デフォルトは「flex-start 」です。flex-startは始端揃え、flex-endは終端揃えで、余白があれば反対側にまとめられます。centerは中央揃えで、バランスよくまとめることが可能です。space-betweenやspace-aroundを使うと、余白が均等になるよう自動で配置します。space-betweenでは、まず両端のアイテムをコンテナの端に揃えたうえで全アイテムを均等に配置します。一方、space-aroundでは、両端のアイテムを含めて均等に配置することが可能です。コンテナ内のアイテム数が少ないときなど、やや中央に寄せつつ均等に配置したい場合はspace-aroundを使うのが良いでしょう。

align-items

align-itemsはjustify-contentの対となるプロパティで、交差軸（cross axis）方向の揃え方を指定します。交差軸に対するflexアイテムのレイアウトを定義するものです。「align-items: stretch;」のように記述し、デフォルト値は上下に隙間なく配置するstretchです。高さが足りない場合は拡張して補いますが、flexアイテムに高さが指定されていない場合に限ります。align-items と同じく、flex-startは始端揃え、flex-endは終端揃え、centerは中央揃えです。baselineを設定すると、フォントの基準線であるベースラインを揃えられるため、テキストが読みやすくなります。

align-content

アイテムが複数行にまたがる際、交差軸方向の揃え方を折り返したflexアイテム全体に対して指定するプロパティです。そのため、flex-wrapプロパティの値がwrapまたはwrap-reverseである場合のみ有効となります。「align-content: stretch;」のように記述し、高さ（幅）を拡張して余白を埋めるように配置するstretchがデフォルト値です。flex-startは始端揃え、flex-endは終端揃えで、たとえばflex-startの場合はアイテム全体が上に寄ったような配置となります。align-contentプロパティの値やその考え方は、justify-contentプロパティとほぼ同様です。中央揃えのcenterはもちろん、両端揃えかつ均等に配置するspace-betweenや、両端を含めて余白を均等にして配置するspace-aroundも使えます。

Flexアイテムに使用可能なプロパティ

親要素であるflexコンテナへのプロパティ設定だけでも、flexboxはCSSコーディングを便利にしてくれます。さらに、子要素であるflexアイテムにもプロパティを設定すると、より凝ったwebページとすることが可能です。ここでは、flexアイテムに使えるプロパティの内容や使い方などについて解説します。

order

flexコンテナ内のFlexアイテムの並び順を指定するプロパティです。通常flexアイテムはHTMLの記述に従って配置されますが、orderプロパティを使えばHTMLでの並び順を変えずに並び順だけを変更できるため改修時にも役立ちます。デフォルト値は0で、数字が小さい順に並ぶほか、負の値も指定可能です。ほかのアイテムの設定値を変えない状態で、位置を変えたいアイテムのみ-1などのように設定すると、対象アイテムを簡単に先頭に持って行くことができます。「order: 3;」のように記述して利用します。

flex-grow

flexコンテナ内に余白がある場合、flex-growプロパティを設定することで、flexアイテムの大きさなどに関わる伸長係数を自動で指定できます。デフォルト値は0で、負の値は無効です。すべてが0のデフォルト時のように、同じ値を指定するとすべてのflexアイテムは同じサイズになります。いずれかの値を大きくすると、対象のアイテムが大きくなり、ほかのアイテムは残りのスペースを均等に割ったサイズとなります。全体のバランスを崩さずに特定のアイテムだけを大きくしたいときに便利です。「flex-grow:1;」のように記述して利用します。

flex-shrink

flex-growプロパティと対をなす、アイテムの縮小係数の比率を設定できるプロパティです。flexアイテム全体の幅が flexコンテナの主軸幅より大きい場合に、縮小率を数値で指定できます。flex-growプロパティとは反対に、値を設定したアイテムのみ小さくなり、値の大きさに反比例して小さくなります。こちらのデフォルト値は1で、flex-growプロパティと同様に負の値は無効です。0を指定した場合はオリジナルサイズを保ちます。「flex-shrink:1;」のように記述して利用します。

flex-basis

flexアイテムの基準となる初期幅（main size）を設定するプロパティです。「px」や「em」など、単位付きの数値やFlexコンテナのmain sizeに対するパーセンテージを細かく指定することができます。デフォルト値は、自身のwidthまたはheightプロパティを参照する「auto」です。contentと設定すると、幅をコンテンツの横幅から自動でサイズ設定することもできます。親要素のサイズやflex-growプロパティなどが指定されている場合は自動的に調整されます。widthやheightプロパティのようなサイズ固定方法ではないため注意してください。「flex-basis:50%;」のように記述して利用します。

flex

flex-grow、flex-shrink、flex-basis の3つのプロパティを一括指定できるショートハンドプロパティです。デフォルト値は各プロパティに準じ「flex: 1 0 20%;」のように、伸長係数・縮小係数・初期サイズの順で指定します。各プロパティの値を半角スペースで区切って記述し、いずれかの値を省略した際は各プロパティのデフォルト値が適用されます。3つのプロパティの値の代わりに「initial」「auto」「none」といったキーワードも指定可能です。initialは「0 1 auto」、autoは「1 1 auto」、noneは「0 0 auto」と同じ意味を持っています。

align-self

flexアイテムの垂直方向の位置を決めるプロパティです。コンテナに余白がない場合は指定値が無視されます。デフォルト値は、親要素であるalign-itemsプロパティの値を適用するautoです。align-itemsプロパティと同様にflex-startは上揃え、flex-endは下揃え、centerは中央揃えで配置します。ベースラインに準じて配置するbaseline、上下の余白を埋めて配置するstretchも変わりません。「align-self: stretch;」のように記述して利用します。

flexboxの活用でCSSによるレイアウトの幅が広がる

CSSによるレイアウトはweb制作の基本スキルであるため、あらゆる手法を正しく理解しておく必要があります。flexboxを使えば「float」や「margin」などのプロパティよりもシンプルに記述できるためおすすめです。HTML の記載を変えずにデザインだけを変えられるプロパティもあるため、改修も簡単に行えます。flexboxを使いこなして、レイアウトの可能性を広げましょう。