Web 開発者の間で flexbox に対する関心が急速に高まった理由のひとつに、Web コンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。適切な縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは flexbox において位置合わせのプロパティや行端揃えのプロパティがどのように働くかを詳しくみていきます。
ボックスを中央寄せするには、align-items プロパティを使って交差軸 (今回の場合は縦軸) 上の位置合わせをし、justify-content プロパティで主軸 (今回の場合は横軸) 上の位置合わせをします。
以下の例のコードをみてください。コンテナや子要素のサイズを変更しても、子要素は常に中央寄せされます。
配置を制御するプロパティ
本ガイドで扱うプロパティは以下のとおりです。
justify-content— 全アイテムの主軸上の配置を制御する。align-items— 全アイテムの交差軸上の配置を制御する。align-self— 個別の flex アイテムごとに交差軸上の配置を制御するalign-content— 仕様では「flex 行のパッキング (packing flex lines)」と説明されている。交差軸上での flex 行間の余白を制御する。
また、auto マージンが flexbox での位置合わせにどのように使えるかについても触れます。
注: Flexbox における各種の配置プロパティは、そのプロパティ定義専用の仕様である CSS Box Alignment Level 3 にも記載されています。この仕様が最終的には Flexbox Level 1 仕様で定義しているプロパティの定義に取って代わることが予期されています。
交差軸
align-items プロパティと align-self プロパティは、交差軸 (cross axis: flex-direction が row のときは列に沿った、または flex-direction が column のときは行に沿った軸) 上での flex アイテムの配置を制御します。
もっとも単純な flex の例で、交差軸上の位置合わせを試してみましょう。display: flex をコンテナに設定すると、子要素はすべて flex アイテムになり、一行に配置されます。この flex アイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。Flex コンテナに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナの高さまでアイテムが伸張します。
アイテムが同じ高さになるのは、交差軸での配置を制御する align-items プロパティの初期値が stretch となっているためです。
アイテムの配置をコントロールするために、以下の値を使うことができます。
align-items: flex-startalign-items: flex-endalign-items: centeralign-items: stretchalign-items: baseline
以下の例では、align-items の値は stretch に設定されています。他の値についても試し、flex コンテナの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。
align-self で個別のアイテムを位置合わせする
align-items プロパティはすべてのアイテムの align-self プロパティをまとめて設定します。つまり、align-self プロパティでは１つずつ個別のアイテムを対象として指定できます。align-self プロパティには、align-items プロパティに使えるすべての値と、それに加えて flex コンテナで定義した値にリセットするための auto を使うことができます。
次の例では、flex コンテナには align-items: flex-start を設定していて、これはアイテムを交差軸上の始点に揃えます。first-child セレクタを使って最初のアイテムを対象として、align-items: stretch を設定しており、また別のアイテムを selected クラスで選択して align-self: center を設定してます。align-items の値を変更したり、個別のアイテムの align-self の値を変更して、どのように動作するかを試してみてください。
主軸を変更する
ここまでは、flex-direction が row で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。
flex-direction を column に変更した場合、align-items と align-self はアイテムの左右方向での位置合わせを行うようになります。
次の例では flex-direction: column を設定し、それ以外は先の例と全く同じ flex コンテナを使ってこの動作を示しています。
交差軸上の位置合わせ — align-content プロパティ
ここまで、flex コンテナによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行の flex コンテナがある場合、align-content プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「flex 行のパッキング (packing flex lines)」として説明されています。
align-content が有効に動作するためには、アイテムを表示するのに必要な高さよりも flex コンテナの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。
align-content プロパティには以下の値を設定できます。
align-content: flex-startalign-content: flex-endalign-content: centeralign-content: space-betweenalign-content: space-aroundalign-content: stretchalign-content: space-evenly(Flexbox 仕様には含まれていない)
以下の例では、flex コンテナは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。align-content の値は space-between で、この場合は残る分配可能スペース (available space) は flex 行の間に分配され、flex 行自体はコンテナの交差軸上の始点と終点に密着して配置されます。
align-content プロパティがどのようにはたらくか、ほかの値を設定して確認してください。
列に沿った軸の時にこのプロパティの効果がどのように変わるか、flex-direction を column に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。
注: space-evenly は flexbox 仕様では定義されておらず、あとから Box Alignment 仕様に追加されたものです。この値に対するブラウザーの対応は、flexbox 仕様に定義されている他の値より遅れています。
上述の値についての詳細とブラウザー対応状況については MDN の justify-content のページを参照してください。
主軸上での位置合わせ
ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは justify-content の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。justify-content では、アイテムを表示するのに必要な分よりも大きいスペースがある場合の分配可能スペースの扱いを制御できます。
コンテナに display: flex を設定した最初の例では、アイテムはコンテナの始点に一行に整列して表示されます。これは justify-content の初期値が flex-start であるためです。すべての分配可能スペースはアイテムの後ろに置かれます。
justify-content プロパティは align-content と同じ値を受け付けます。
justify-content: flex-startjustify-content: flex-endjustify-content: centerjustify-content: space-betweenjustify-content: space-aroundjustify-content: stretchjustify-content: space-evenly(Flexbox 仕様には含まれていない)
次の例では、justify-content の値は space-between となっています。アイテムを表示した後に余った分配可能スペースは、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と終点に揃えて並びます。
flex-direction が column に設定されて主軸がブロック方向となっているとき、justify-content は flex コンテナ内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。
位置合わせと Writing Mode
上述の配置方法において、flex-start と flex-end はいずれも writing mode に対応したものとなります。justify-content の値が flex-start で、writing mode が英語のように左から右であれば、アイテムはコンテナの左端から並べられます。
一方で writing mode がアラビア語のように右から左であれば、アイテムはコンテナの右端から並べられます。
以下の例では flex アイテムを右から左に並べるために direction プロパティを rtl を設定しています。この設定を削除したり justify-content の値を変更するなどして、行が右から始まる場合の flexbox の動作を確認してください。
位置合わせと flex-direction
flex-direction プロパティを変更した場合にも、始点は変わります。例えばrow の代わりに row-reverse を設定した場合などがこれにあたります。
次の例では、flex-direction: row-reverse と justify-content: flex-end を設定してアイテムをレイアウトしています。左から右の言語では、すべてのアイテムは左側に並びます。flex-direction: row-reverse の値を flex-direction: row に変更してみてください。アイテムが右側に移動することがわかります。
こうした動作はすこし紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸・行方向の軸に沿って flex アイテムが配置されます。flex-start は文の中でテキストが始まる側を示すことになります。
flex-direction: column を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は flex-start は段落が始まる先頭を示すことになります。
flex-direction を逆方向に設定した場合、軸の終点側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。flex-start はその軸の終点側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。
主軸上での位置合わせに auto マージンを使う
主軸上ではアイテムは一つのグループとして扱われるため、justify-items プロパティや justify-self プロパティに相当するものはありません。しかし、flexbox と併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。
よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは justify-self プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。３つのアイテムが片方にあり、もう一方に２つのアイテムがあります。もし仮に justify-self がアイテム d に対して使えたとすると、意図したものであってもそうでなくても、それに続くアイテム e の配置も変わってしまうでしょう (訳註: プロパティ名で self = 自分自身と言っているのに他のアイテムにも影響を与えてしまう)。
4 つめのアイテムに対して justify-content ではなく margin-left に auto を設定すれば、先頭の３つから分離できます。auto マージンはマージンの方向に沿ったスペースをすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央そろえするときと同じです。両側のマージンが取れるだけのスペースをとろうとするために、ブロックが中央に押し出されることになります。
以下の例では、最小限の flex 設定をして一行に並べた flex アイテムと、margin-left: auto を設定した push クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。
Flexbox による位置合わせ機能の今後
この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、align-content プロパティと justify-content プロパティに space-evenly が導入されていることも紹介しました。
Box Alignment モジュールは他にも column-gap や row-gap といった、アイテムの間にスペースを作るための方法を含んでいます (CSS Grid Layout にて説明しています)。これらのプロパティが Box Alignment に含まれているということは、将来的に column-gap や row-gap が flex レイアウトでも使用できるようになることを示しています。これによって flex アイテムの間隔を開けるためにマージンを使わずにすむようになります。
Flexbox での配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様も Box Alignment 仕様で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、MDN の記事 Box Alignment in Grid Layout を参照してください。また、筆者 (訳注: 英語版の作成者 rachelandrew) は各仕様における位置合わせの動作について Box Alignment Cheatsheet で比較しています。