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