Flexboxのアライメントについて知っておくべきこと

Rachel AndrewによるFlexbox CSSテクノロジーの機能に関する一連の出版物。

1. Flexboxコンテナを作成するとどうなりますか 。

この記事では、Flexboxの位置合わせプロパティと、主軸と横軸の両方で位置合わせがどのように機能するかを覚えておくのに役立つ基本的な規則について説明します。

このシリーズの最初の記事で、要素に対してdisplay：flexが宣言されたときに何が起こるかを説明しました。 今回は、配置プロパティとFlexboxでの動作を見ていきます。 alignを実行するタイミングと正当化するタイミングについて混乱している場合は、この記事がすべての質問を解決することを願っています！

Flexbox Alignmentの歴史

CSSレイアウトの歴史の中で、両方の軸で要素を正しく整列させる機能は、私にとって本当に最も難しいWebデザインの問題のように思えました。 つまり 要素と要素のグループを正しく整列させる機能は、私たちの多くにとって 、 Flexboxがブラウザーに最初に登場したときの最もエキサイティングな機能でした。 CSSでの配置は2行になりました。

flexboxの整列プロパティと見なすことができる整列プロパティは 、現在、 Box Alignment仕様で完全に定義されています。 さまざまなレイアウトコンテキストでの整列の仕組みについて詳しく説明します。 これは、 CSSグリッドでFlexboxと同じアライメントプロパティを使用できることを意味し、将来、および他のレイアウトコンテキストでも使用できます。 したがって、 flexboxの新しい配置オプションは、次のFlexboxレベルではなく、 Box Alignment仕様で詳細に説明されます。

プロパティ

多くの人は、 flexboxで始まるプロパティをalign-で使用するか、 justify-で始まるプロパティを使用するかを覚えるのに苦労していると言います。 次のことに注意してください。

• 主軸を揃えます。 フレックス方向と同じ方向のアライメント。
• alignは、垂直軸を整列します。 フレックス方向に垂直な方向のアライメント。

ここでは、水平軸と垂直軸ではなく、主軸と横軸の観点から考えることが本当に役立ちます。 軸の物理的な方向は問題ではありません。

主軸をjustify-contentに揃える

主軸を揃えることから始めましょう。 主軸上の位置合わせは、 justify-contentプロパティを使用して行われます。 このプロパティは、すべてのフレックスアイテムをグループとして扱い、それらの間のスペースの分布を制御します。

justify-contentプロパティの初期値はflex-startです。 そのため、 display: flex宣言display: flexときにdisplay: flexすべてのフレックス要素がフレックスラインの先頭に並んでいます。 フレックス方向に値行（行）と、英語のように言語のテキストを左から右に入力する方向がある場合、要素は左から始まります。

図_1。 要素は最初から並んでいます。

justify-contentプロパティは、配布用の空き領域がある場合にのみアクションを実行できることに注意してください。 したがって、フレックス要素のセットがメイン軸上のすべてのスペースを占有している場合、 justify-contentを使用しても何も変わりません。

図_2。 再配布のためのスペースがありません

justify-contentプロパティにflex-end値を指定すると、すべての要素が行の最後に移動します。 空きスペースは最初に配置されます。

図_3。 最後に要素が並んでいます。

このスペースで他のことができます。 justify-content: space-betweenを使用して、フレックス要素間で分散するように彼に依頼できます。 この場合、最初と最後の要素はコンテナの端と同じ高さになり、スペース全体が要素間で均等に分割されます。

図4。 空きスペースは要素間に分配されます

justify-content: space-aroundを使用して、flex要素の周囲にスペースを分散するようにリクエストできます。 この場合、使用可能なスペースが割り当てられ、要素の両側に配置されます。

図_5。 要素には、その両側にスペースがあります。

justify-contentプロパティの最新の値は、 Box Alignment仕様に記載されています。 Flexbox仕様には含まれていません。 空間均等です。 この場合、要素はコンテナ内に均等に分散され、追加のスペースが要素間および両側にあります。

図_6。 要素は均等に分散されます。

デモですべての値を試すことができます：

フレックス方向が列の場合、これらの値は同じように機能します。 ただし、次のデモのように、ブロックの高さまたはサイズをflexコンテナに追加しない限り、列に追加のスペースを追加できない場合があります。

垂直軸をalign-contentに揃えます

flex-wrap：フレックスコンテナにラップし、複数のフレックスラインがある場合、 align-contentプロパティを使用して、横軸にフレックスラインを配置できます。 ただし、これには横軸上に追加のスペースが必要です。 以下のデモでは、横軸はブロック状の方向に走っています。 列で、コンテナの高さを60vhに設定します。 これはフレックスアイテムを表示するために必要以上のものであるため、コンテナ内に垂直方向の空きスペースがあります。

次に、 align-contentを任意の値で使用できます。

フレックス方向が列の場合、次の例のように、 align-contentが機能します。

justify-contentと同様に、グループ内の行を処理し、空き領域を割り当てます。

プレースコンテンツプロパティの短い形式

Box Alignment仕様には、 place-contentプロパティの短縮形があります。 このプロパティを使用すると、 justify-contentとalign-contentをすぐに設定できます。 最初のパラメーターはalign-contentに指定され、2番目のパラメーターはjustify-contentに指定されます 。 1つの値のみを指定した場合、両方のパラメーターに設定されます。したがって、

 .container { place-content: space-between stretch; } 

と同じ：

 .container { align-content: space-between; justify-content: stretch; } 

使用した場合：

 .container { place-content: space-between; } 

それは次と同じです：

 .container { align-content: space-between; justify-content: space-between; } 

垂直軸をalign-itemsに揃えます

これで、フレックス要素のセットまたはフレックスラインをグループとして整列できることがわかりました。

ただし、要素を整列させる別の方法があります-横軸上の要素の相対的な整列。 コンテナは背が高いです。 この図のように、この高さは最も高い要素の高さによって決定できます。

図_7。 コンテナの高さは3番目の要素によって決まります

代わりに、flexコンテナに高さを追加することで定義できます：

図_8。 高さは、フレックスコンテナのサイズによって決まります。

flexアイテムが最も高いアイテムのサイズに引き伸ばされる理由は、 align-itemsパラメーターの初期値がstretchであるためです。 そして、要素は横軸に沿って引き伸ばされ、その方向のフレックスコンテナのサイズを取得します。

align-itemsの場合、値が関係することに注意してください。複数行のflexコンテナがある場合、各行は新しいflexコンテナとして機能します。 この行の最上位の要素は、行のすべての要素のサイズを決定します。

初期ストレッチ値に加えて、 align-itemsをflex-startに設定できます。この場合、それらはコンテナの先頭に揃えられ、高さはストレッチされなくなります。

図_9。 横軸の始点に揃えられた要素

フレックスエンド値は、横軸に沿ってコンテナの端に移動します。

図_10。 横軸の端に配置された要素

値の中心を使用する場合、要素はすべて互いに中心に配置されます。

図_11。 横軸を中心とした要素

また、ベースライン調整を行うこともできます。 これにより、コンテンツの余白ではなく、テキストのベースラインが揃えられます。

図_12。 ベースラインアライメント

デモでこれらの値を試すことができます：

align-selfを使用した個別の調整

align-itemsプロパティは、すべての要素の配置を一度に設定できることを意味します。 実際、グループ全体の個々のflexアイテムのalign-selfプロパティの値を設定します。

単一のフレックスアイテムのalign-selfプロパティを使用して、フレックスライン内で他のフレックスアイテムと揃えることもできます。

次の例では、コンテナのalign-itemsを使用して中央のグループの配置を設定しましたが、最初と最後の要素に対してalign-selfを使用して配置値を変更しました。

セルフレベリングがないのはなぜですか？

主軸に沿って1つの要素または要素グループを揃えることが不可能な理由はしばしば疑問になります。 主軸上の位置合わせのために、 Flexboxに -selfプロパティがないのはなぜですか？ justify-contentとalign-contentをスペースの分布と考えると、セルフチューニングが行われない理由がより明確になります。 フレックス要素をグループとして処理し、利用可能なスペースを特定の方法で（グループの最初または最後、または要素間で）分配します。

CSSグリッドレイアウトでコンテンツを正当化する方法とコンテンツを調整する方法を考えることも役立つ場合があります。 グリッドでは、これらのプロパティを使用して、グリッドトラック間のグリッドコンテナの空きスペースを分配します。 ここでも、トラックをグループとして扱い、これらのプロパティを使用して、それらの間に追加のスペースを分散する機会を与えます。 グリッドとFlexboxの両方でグループで行動するため、自分で要素を狙い、他の何かをすることはできません。 ただし、メイン軸のセルフプロパティを要求するときに要求するレイアウトの種類を実現する方法があります。それは自動フィールドを使用することです。

メイン軸で自動インデントを使用する

CSSでブロックを中央に配置したことがある場合（たとえば、 autoで左右にマージンを設定してメインページのコンテンツのラッパー）、自動フィールドの経験があります。 autoに設定されたインデントは、設定された方向に可能な限り大きくしようとします。 インデントを使用してブロックを中央に配置する場合、左右両方をautoに設定します。 それらのそれぞれは、できるだけ多くのスペースをとろうとしているため、ブロックを中央に押し込みます。

インデントはFlexboxで非常にうまく機能し、個々の要素または要素のグループを主軸上に整列します。 次の例では、共通の設計パターンを実現しています。 Flexboxを使用したナビゲーションバーがあり、要素は文字列として表示され、初期値justify-content: startます。 ラインに十分なスペースがある場合、最後のアイテムをフレックスラインの最後に他のアイテムとは別に表示したいと思います。

このメニュー項目を目指して、 margin-left autoを指定しています。 これは、フィールドがアイテムの左側にできるだけ多くのスペースを取得しようとしており、アイテムを右端まで押し出そうとしていることを意味します。

メイン軸で自動インデントを使用する場合、自動インデントはそれ以外の場合はjustify-contentを使用して配布されるスペース全体を占有するため 、 justify-contentプロパティはエフェクトの作成を停止します。

フォールバックアライメント

各アライメント方法は、バックアップの割り当てを詳細に記述します。これは、要求されたアライメントが達成できない場合に起こることです。 たとえば、フレックスコンテナにアイテムが1つしかない場合、 justify-content：space-betweenをリクエストするとどうなりますか？ 答えは、フォールバックアラインメントはflex-startを使用し、1つの要素がflexコンテナの先頭にアラインされることです。 justify-content：space-aroundの場合、中央のバックアップ配置が使用されます。

現在の仕様では、バックアップのアライメント設定を変更することはできません。 したがって、 flex-startよりもspace-betweenのフォールバックオプションを中心にしたい場合、これを行う方法はありません。 ただし、仕様には、この機能が将来のレベルに含まれる可能性があるという注記があります。

安全なアライメントと安全でないアライメント

Box Alignment仕様に最近追加されたのは、安全なキーワードと安全でないキーワードを使用した安全で安全でないアライメントの概念です。

次のコードでは、最後の要素がコンテナに対して広すぎます。ページの左側に安全でない位置合わせと柔軟なコンテナがある場合、オーバーフローはページの境界を超えるため、要素は切り取られます。

 .container { display: flex; flex-direction: column; width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; } 

図_13。 安全でないアライメントは必要なアライメントを提供しますが、データが失われる可能性があります

安全なアライメントは、オーバーフローを反対側に移動することでデータの損失を防ぎます。

 .container { display: flex; flex-direction: column; width: 100px; align-items: safe center; } .item:last-child { width: 200px; } 

図_14。 安全なアライメントは、データの損失を防ぎます

これらのキーワードは現在、ブラウザーのサポートが制限されていますが、 Box Alignment仕様を通じてFlexboxに導入された追加のコントロールの本質を示しています。

最後に

配置プロパティはFlexboxのリストとして始まりましたが、現在では独自の仕様があり、他のレイアウトコンテキストにも適用されます。 いくつかの重要な事実は、 Flexboxでそれらを使用する方法を思い出すのに役立ちます。

• 主軸を揃え 、横軸を揃えます。
• align-contentとjustify-contentを使用するには、ゲーム用の空きスペースが必要です。
• align-contentおよびjustify-contentプロパティは、要素をグループとして扱い、スペースを共有します。 したがって、それらを個別の要素に構成することはできません。したがって、これらのプロパティの自己調整はありません。
• 1つの要素を揃えたり、メイン軸でグループを分割したりする場合は、自動インデントを使用します。
• align-itemsプロパティは、グループのすべてのalign-self値を設定します 。 子要素でalign-selfを使用して、個々の要素の値を設定します。