フレックスボックス

docs.scrimba.com

3つのボタンを1行に配置し、均等に間隔を空け、すべて同じ高さにして、各ボタンのテキスト量に関わらず垂直方向に中央揃えしたいとします。昔はこれを実現するにはfloatやclearfix、そして多くの推測が必要でした。フレックスボックスはこのために作られたツールです。1つのコンテナに子要素を1行にレイアウトするよう指示し、その後2つのアクシスに沿って要素をずらして、好きな位置に配置します。Webで見かけるほとんどの日常的なレイアウト、ナビゲーションバー、ツールバー、カードの行は、その下にフレックスコンテナがあります。

フレックスコンテナ

フレックスボックスは親要素に1行のコードで始まります。コンテナにdisplay: flexを設定すると、その直下の子要素が1行に並んで配置されます。そのコンテナは**フレックスコンテナ**となり、その内部の各子要素はフレックスアイテムになります。

.nav {
  display: flex;    /* 子要素が1行に並ぶようになります */
}

アイテムは2つの方向に沿ってレイアウトされます。メインアクシスは左から右に走り、アイテムが並ぶ方向です。クロスアクシスは上から下に走り、行の向こう側です。両方のアクシスに沿ってアイテムを制御するため、今のうちに思い浮かべるのに役立ちます。メインアクシスはアイテムが置かれている線、クロスアクシスはそれを横切る方向です。

display: flexはあるエレメントを**フレックスコンテナ**に変え、その直下の子要素をフレックスアイテムにします。直下の子要素だけが関わります。より深くネストされたものは、その親で自身がレイアウトされます。デフォルトでは、アイテムは左から右に1行に配置され、各アイテムはその内容の幅に縮められます。

.nav {
  display: flex;    /* 直下の子要素がフレックスアイテムの行になります */
}

モデル全体は2つのアクシスで動作します。メインアクシスはアイテムが流れていく方向で、デフォルトでは行なので、左から右です。クロスアクシスはそれに垂直で、上から下に走ります。出会うすべての配置プロパティは一方のアクシスか他方で動作するため、2つを区別することが、残りが全て理解できるようにする鍵です。

display: flexはあるエレメントに**フレックスフォーマッティングコンテキスト**を与えます。その直下の子要素はフレックスアイテムになり、通常のフローではなくフレックスアルゴリズムでレイアウトされます。直下の子要素だけが関わります。テキストランとネストされた子孫はその下で処理されます。これはマージンの相殺を止めるのと同じ種類の境界であり、これがフレックスレイアウトが、置き換わったfloat-and-clearの時代より予測可能に動作する理由の1つです。

.nav {
  display: flex;    /* フレックスフォーマッティングコンテキストを確立します */
}

2つのアクシスがすべてを支配します。メインアクシスはflex-directionで設定され（デフォルトでは行なので、左から右）、クロスアクシスはそれに垂直です。区別は見た目だけではありません。justify-contentは常にメインアクシスに沿って動作し、align-itemsは常にクロスアクシスに沿って動作するため、flex-directionをcolumnに変えた瞬間、この2つのプロパティは動作方向が入れ替わります。「水平」と「垂直」ではなくアクシスでレイアウトに名前を付けることが、方向が変わるときにそれを一貫性のあるものに保つのです。

.nav {
  display: flex;
}

1つの宣言で、あらゆるブロックの子要素は上から下にスタックするのを止め、1行に座り始めます。この章の他のすべては、コンテナ内にあるそれらのアイテムを制御することについてです。

Junoフレックスコンテナ 親にdisplay: flexを置くと、その直下の子要素が1行に並びます。その親はフレックスコンテナ、子要素はフレックスアイテムです。アイテムは2つの方向に動きます。メインアクシスはそれらが座っている線、クロスアクシスはそれを横切り、両方のアクシスに沿ってアイテムを押します。

Junoフレックスコンテナdisplay: flexはコンテナに直下の子要素をフレックスアイテムの行としてレイアウトさせます。直下の子要素だけが関わり、より深くネストされたものは関わりません。2つのアクシスを頭の中ではっきり保ってください。メインアクシスはフロー方向、クロスアクシスは垂直で、すべての配置プロパティは一方か他方で動作します。

Junoフレックスコンテナdisplay: flexはフレックスフォーマッティングコンテキストを開始するため、直下の子要素はフレックスアルゴリズムでレイアウトされ、マージンはそれ内で相殺されなくなります。水平と垂直ではなくアクシスでレイアウトに名前を付けてください。justify-contentはメインアクシスを追跡しalign-itemsはクロスアクシスを追跡するため、flex-directionをcolumnに変えると、この2つは動作方向が入れ替わります。

アクシスに沿った配置

アイテムが1行に並んだら、2つのプロパティでそれらを動かします。**justify-content**はメインアクシスに沿ってアイテムを間隔を空け、アイテムが座っている方向です。align-itemsはクロスアクシスに沿ってそれらを動かし、行内の上下です。

.nav {
  display: flex;
  justify-content: space-between;   /* 行に沿ってアイテムを押し離します */
  align-items: center;              /* 垂直方向の中央に配置します */
}

justify-contentの一般的な値はflex-start（左に詰まった）、center（中央に詰まった）、flex-end（右に詰まった）、space-between（アイテム間に隙間、端にはなし）、およびspace-around（各アイテムの両側に隙間）です。align-itemsについては、centerがもっとも使うものです。

両方向で何かを中央に配置するには、最初に学ぶ方法は、両方をcenterに設定することです。

.hero {
  display: flex;
  justify-content: center;   /* メインアクシスに沿って中央揃え */
  align-items: center;       /* クロスアクシスに沿って中央揃え */
}

2つのプロパティが配置を処理し、1アクシスごとに1つです。**justify-content**はメインアクシスに沿ってアイテムを分配し、align-itemsはクロスアクシスにそれらを配置します。異なるアクシスを所有しているため、それらは決して競い合わず、垂直方向を指します。

.nav {
  display: flex;
  justify-content: space-between;   /* メインアクシスに沿ってアイテムを広げます */
  align-items: center;              /* クロスアクシスでそれらを中央揃えします */
}

justify-contentについては、知る価値があるのはflex-start、center、flex-end、space-between（アイテム間に等しい隙間、エッジに沿って）、およびspace-around（各アイテムの周りに等しいスペース、エッジの隙間は中央のものの半分）です。align-itemsについては、デフォルトはstretchで、すべてのアイテムをコンテナの高さを満たします。これが、コンテンツが異なっていても、カードの行が同じ高さで出てくる理由です。align-items: centerを設定すると、それらはコンテンツの高さに縮み、代わりに中央に座ります。

両方のアクシスで中央揃えするのは、フレックスボックスを有名にするプロパティペアです。

.hero {
  display: flex;
  justify-content: center;   /* メインアクシス */
  align-items: center;       /* クロスアクシス */
}

配置はアクシスで綺麗に分かれます。**justify-content**はメインアクシスに沿って余りスペースを分配し、align-itemsはすべてのアイテムのデフォルトクロスアクシス位置を設定します。垂直方向のアクシスで動作するため競い合うことはできませんが、どの方向が「メイン」かに両方依存するため、flex-direction: columnは各者が制御するものを交換します。

.nav {
  display: flex;
  justify-content: space-between;   /* 余りスペースはアイテム間に行きます */
  align-items: center;              /* 各アイテムがクロスアクシスで中央揃えされます */
}

人々を混乱させる区別は、メインアクシス上に余りスペースがあるときだけ、justify-contentが何かすることです。それは余りスペースを分配するため、アイテムがすでにコンテナを埋めている場合（またはそれを超えている場合）、space-betweenとcenterは配布するものがないため同じに見えます。対照的に、align-itemsはコンテナのクロスサイズ内で各アイテムを独立して配置し、その初期値はstretchです。クロスアクシスサイズが固定されていないアイテムはコンテナを埋めるために成長します。等しい高さのカードの行はalign-items: stretchがそのデフォルト仕事をしています。下の列サイジングセクションで扱われるalign-selfでアイテムごとにそれをオーバーライドします。

.hero {
  display: flex;
  justify-content: center;   /* メインアクシス中央揃え */
  align-items: center;       /* クロスアクシス中央揃え、stretch デフォルトをオーバーライドします */
}

2つのアイテムとコンテナのmin-height、両方をcenterに設定すると、絶対配置と負のマージンを偽ってまでして、開発者の世代が取り組むのに必要な中央揃え問題を解決しています。

Junoアクシスに沿った配置justify-contentはメインアクシスに沿ってアイテムを間隔を空け、align-itemsはクロスアクシスに沿ってそれらを動かします。最初のもののために覚えておく値はcenter、space-between、flex-startです。両方をcenterに設定すると、内部にあるものが真中に座り、これはあなたが何度も何度も使うレイアウト方法です。

Junoアクシスに沿った配置 1アクシスごと1プロパティ。メインアクシスのjustify-content、クロスアクシスのalign-items。デフォルトのalign-items: stretchが、要求していなくても、カードの行が同じ高さで出てくる理由です。そして両方をcenterに設定することは、記憶に留める価値のある何かを中央揃えする方法です。

Junoアクシスに沿った配置justify-contentは余りメインアクシススペースを分配するため、アイテムが既に行を埋めていれば何もしません。これは多くの「なぜこれが中央揃えされていないのか」という瞬間を説明しています。align-itemsはクロスアクシスの各アイテムを配置し、デフォルトはstretchで、無料で等しい高さの行を与えます。flex-directionを変え、記憶に留めてください。両方のプロパティはそれらが動作するアクシスを交換します。

方向とラッピング

デフォルトでは、フレックスコンテナはアイテムを1行にレイアウトします。**flex-direction**で変更します。columnに設定すると、アイテムは横に並ぶのではなく、上から下にスタックします。

.sidebar {
  display: flex;
  flex-direction: column;   /* アイテムが今は垂直にスタックします */
}

行内のアイテムが余地を失うと、より薄くなります。代わりに新しい行に落とすようにするには、flex-wrap: wrapを追加します。

.card-row {
  display: flex;
  flex-wrap: wrap;   /* フィットしないアイテムは次の行に移ります */
}

アイテム間のスペースについては、gapを使用してください。外側のエッジにスペースを追加せずに、すべてのアイテムの間に一貫したギャップを追加します。

.card-row {
  display: flex;
  gap: 16px;   /* 各アイテム間に16px */
}

**flex-direction**がメインアクシスを設定します。デフォルトのrowは左から右に走ります。columnはメインアクシスを垂直にするため、アイテムは上から下にスタックし、重要なのは、justify-contentは垂直スペーシングを制御し、align-itemsは水平を制御するようになります。順序が反転する必要がある場合は、row-reverseとcolumn-reverseもあります。

.sidebar {
  display: flex;
  flex-direction: column;   /* メインアクシスは今は垂直です */
  justify-content: center;  /* これは垂直に中央揃えすることを意味します */
}

デフォルトでは、フレックス行は決して壊れません。アイテムはラップするのではなく、フィットするために縮みます。flex-wrap: wrapを設定すると、フィットしないアイテムが新しい行に移動し、これはメディアクエリなしでレスポンシブカードグリッドを可能にするものです。

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;   /* ギャップは両方のアクシスで動作します。行と列の間に16px */
}

アイテムのマージンではなく、スペーシングにgapを使用してください。gapはアイテム間だけに適用され、外側のエッジには適用されないため、最後の子要素の尾部マージンを削除する必要がありません。

**flex-direction**はメインアクシスを定義し、すべてのアクシス依存プロパティはそれに従います。row（デフォルト）はメインアクシスを水平にします。columnはそれを垂直にし、静かにjustify-contentを垂直スペーシングに、align-itemsを水平に再割り当てします。-reverseバリアントはメインアクシスの方向を反転させますが、それらは視覚的にのみ並べ替えることに注意してください。DOMの順序は変わらないため、キーボードとスクリーンリーダーの順序はソースに従い続けます。これはrow-reverseに手を伸ばすときの本当のアクセシビリティ考慮です。

.sidebar {
  display: flex;
  flex-direction: column;    /* メインアクシス垂直; justify-content は今は垂直に中央揃えします */
  gap: 8px;
}

flex-wrap: wrapは単一行制限を解除します。それなしでは、フレックスコンテナはすべてのアイテムを1行に強制し、任意の不足を縮小することで分配します。それを使うと、メインサイズをオーバーフローするアイテムが新しい行に壊れ、コンテナが複数行になります。ラップが有効になると、align-content（align-itemsと異なります）はクロスアクシスでどのように行を間隔を空けるかを支配します。gapはアイテム間にスペースを設定し、ラップされた時には行の間にも、そしてそれが正しいツールです。マージンとは異なり、何も相殺されず、エッジスペースを追加せず、単一のスペーシング決定として読みます。

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;   /* row-gap 16px、column-gap 24px */
}

これはまた、CSSグリッドとの境界が現れるところです。フレックスラップは行を埋めてから壊れるため、異なる行のアイテムは列に配置されません。真の2次元グリッドで配置された行と列が必要な場合、それはグリッドの仕事であり、フレックスボックスではありません。

Juno方向とラッピングflex-direction: columnはアイテムを行の代わりに垂直にスタックさせます。flex-wrap: wrapは、潰される代わりに、スペースが不足したときにアイテムを新しい行に落とすようにさせます。そしてgapはアイテム間に均等なスペースを置き、エッジにはスペースを追加しないため、マージンの前に手を伸ばします。

Juno方向とラッピングflex-directionがメインアクシスを設定し、columnに切り替えることはjustify-contentが垂直にスペースを空けることを意味し、これは人々を驚かせます。flex-wrap: wrapはカードの行を、メディアクエリなしで反応させるものです。スペーシングにgapを使用して、最後のアイテムに尾部マージンを追うことがないようにします。

Juno方向とラッピングflex-directionはメインアクシスを定義し、すべてのアクシスベースプロパティはそれに従います。一方、-reverse値は視覚的に並べ替え、DOMとフォーカス順序を残します。使用する際は注意してください。flex-wrapはコンテナを複数行にし、行スペーシングをalign-contentに渡します。ラップされたアイテムが実際の列に配置される必要があるとき、それはグリッドであり、フレックスボックスではありません。

フレキシブルなアイテムのサイジング

フレックスボックスのポイントは、アイテムがスペースを共有するために成長または縮小できることです。最も使うショートハンドは、アイテムのflex: 1で、それが成長し、利用可能なスペースの等しいシェアを取ることを伝えます。

.card {
  flex: 1;   /* すべてのカードが行の等しいシェアを埋めるために成長します */
}

3つのカードにflex: 1を置いて1行に並べると、コンテナが3つの等しい幅に分かれます。1つのカードにflex: 2を与えると、それは他のものの2倍のスペースを取ります。その単一の数字は、アイテムがそれらの間で余りスペースをどのように分割するかです。

flex: 1の背後にはアイテムがどれだけ成長するか、どれだけ縮むか、そしてその開始サイズをコントロールする3つの個別のコントロールがあります。最初はそれらを1つずつ設定することはめったにありませんが、ショートハンドは一般的なケースをカバーします。それらがそこにあることを知るのに役立ちます。

3つのプロパティがアイテムがスペースを共有する方法を決定します。**flex-grow**は余りスペースを埋めるためにアイテムがどれだけ成長するかを設定します（0は成長しないことを意味します）。flex-shrinkはスペースが逼迫したときにどれだけ渡すかを設定します（1、デフォルト、は縮む可能性があることを意味します）。flex-basisは成長または縮む前のアイテムの開始サイズを設定し、デフォルトはautoで、「コンテンツまたは幅を使用する」ことを意味します。

flexショートハンドはすべての3つを束ね、実際に入力する値は少なくなります。

.card {
  flex: 1;   /* 成長1、縮小1、基礎0：等幅列 */
}

.sidebar {
  flex: 0 0 240px;   /* 成長しない、縮小しない、240pxのまま */
}

flex: 1は労働力です。コンテンツに関わらず、行を等しいシェアに分割するようにアイテムを作ります。0基礎は彼らがゼロから始まり、彼らの成長要因でだけ成長することを意味するため。flex: 0 0 240pxはflex: 1メイン領域の横の固定幅サイドバーで、継続的に作成するレイアウトです。

アイテムのサイジングはコンテナが順番に評価する3つのプロパティを通じて解決されます。flex-basisはアイテムの開始メインアクシスサイズ、余りスペースが分配される前に取られます。そのデフォルトautoはアイテムのwidth（またはコンテンツサイズ）に従います。その後、コンテナは基礎値の合計とそれ自身のサイズの差を測定します。余りスペースがある場合、各アイテムのflex-growに比例して配布されます。不足がある場合、その基礎によって加重された各アイテムのflex-shrinkに比例して取り戻されます。

/* flex: 1 は flex-grow: 1、flex-shrink: 1、flex-basis: 0% に展開されます */
.card {
  flex: 1;   /* 基礎0、だからアイテムはコンテンツ幅を無視し、成長要因でスペースを分割します */
}

細かい部分はflex-basis対widthで、それらが相互作用するためです。flex-basis: 0（flex: 1のように）はアイテムがそれらのコンテンツを無視し、成長要因だけでスペースを分割するようにし、真の等列を与えます。flex-basis: auto（flex: autoのように、または単純なwidth）はアイテムをそのコンテンツまたは宣言された幅で開始させ、余りだけをその後共有するようにし、より多くのコンテンツを持つアイテムがより広く終わります。それらを選ぶことは、本当にコンテンツが最終的な幅に影響を与えるべきかどうかを選ぶことです。

2つの本番ノート。最初に、両方が設定されているとき、flex-basisはwidthに勝つため、アイテムがフレックスアイテムになると、flexを通じてそのサイズを表現するのを優先します。2番目に、オーバーフロー落とし穴。フレックスアイテムにはデフォルトmin-width: autoがあり、そのコンテンツの本質的なサイズより下に縮小することを拒否することを意味するため、長い単語またはオーバーフロー子は全体の行を吹き出すことができます。修正は、縮小が許可されるべきアイテムのmin-width: 0です。

.main {
  flex: 1;
  min-width: 0;   /* このアイテムがそのコンテンツより下に縮小することを許可するため、長いテキストが代わりにオーバーフローするのではなく切り詰めます */
}

align-selfは単一のアイテムのalign-itemsをオーバーライドするため、1つのアイテムがflex-startで座ることができ、残りは中央です。そしてツーリング呼び出し。1次元レイアウトにフレックスボックスに手を伸ばしてください、ナビゲーションバー、ツールバー、アイテムの単一行または列。配置された行と列を一度に必要とする場合、CSSグリッドが正しいツールです。幅がこれすべての下でどのように解決するかが不確かな場合、サイジング単位はパーセンテージと他のユニットがここでどのように動作するかをカバーします。

.layout {
  display: flex;
  gap: 24px;
}
.sidebar {
  flex: 0 0 240px;   /* 固定240px、決して成長または縮小しません */
}
.main {
  flex: 1;           /* 残りのスペースをすべて取ります */
}

固定サイドバーの横のフレキシブルなメイン列、意図の3行。このパターン、そして前のアラインドナビゲーションバーに加えて、作成するレイアウトの大きなスライスをカバーします。

Junoフレキシブルなアイテムのサイジング アイテムのflex: 1は、成長し、行の等しいシェアを取ることを伝えるため、flex: 1を持つ3つのカードは等しい幅で出てきます。1つをflex: 2にバンプし、それはスペースの2倍を取ります。その単一の数字は、フレックスアイテムがそれらの間でスペースを分割する方法です。

Junoフレキシブルなアイテムのサイジングflexショートハンドは成長、縮小、基礎を束ねます。flex: 1は等幅列を与えます。0基礎はアイテムがゼロから開始し、均等に成長することを意味するためです。flex: 0 0 240pxはflex: 1メイン領域の横のあなたの固定サイドバーで、再度手を伸ばすレイアウトです。

Junoフレキシブルなアイテムのサイジングflex-basisはスペースが共有される前の開始サイズで、フレックスアイテムでwidthを打つため、flex: 1（基礎0）スペースを均等に分割します。flex: autoはコンテンツが幅に影響を与えることを許可します。デフォルトmin-width: autoを見てください。これはアイテムをコンテンツより下に縮小することを停止し、min-width: 0を設定するまで行をオーバーフローさせます。align-selfを使用して、配置からアイテムを剥す、そして真の列を配置する必要があるとき、グリッドに切り替えます。