Flexbox

The CSS Podcast - 010: Flexbox

レスポンシブ デザインで注意が必要なデザイン パターンとして、一部のデザイン パターンの 説明します。ビューポートのスペースがある場合は、このパターンが適切ですが、スペースが限られている場合は、固定レイアウトが問題になる可能性があります。

フレキシブル ボックス レイアウト モデル(flexbox)は、1 次元のコンテンツ用に設計されたレイアウト モデルです。サイズが異なる多数のアイテムを それらのアイテムに最適なレイアウトを返します

これは、このサイドバー パターンに最適なレイアウト モデルです。Flexbox はサイドバーやコンテンツをインラインで 配置できるだけでなく スペースが足りない場合は、サイドバーが新しい行に表示されます。 ブラウザが従う固定のサイズを設定する代わりに、フレックスボックスを使用して柔軟な境界を指定し、コンテンツの表示方法をヒントとして提供できます。

Flex レイアウトでできること

Flex レイアウトには次の機能があります。 これについてはこのガイドで説明します

  • 行または列として表示できます。
  • ドキュメントの書き込みモードを尊重します。
  • デフォルトでは 1 行ですが、複数行に折り返すように指定することもできます。
  • レイアウト内のアイテムの並べ替えや DOM 内の順序から外れています
  • スペースはアイテム内に配置できます。 親の空きスペースに応じて 大きく縮小されます
  • 折り返しレイアウトのアイテムと Flex 行の周囲にスペースを配置するには、Box Alignment プロパティを使用します。
  • アイテム自体は交差軸に沿って配置できます。

メイン軸とクロス軸

Flexbox を理解するには、メイン軸とクロス軸のコンセプトを理解することが重要です。主軸は flex-direction プロパティで設定される軸です。 row の場合、メイン軸は行に沿って配置されます。column の場合、メイン軸は列に沿って配置されます。

3 つのボックスが横に並んでいて、左から右に矢印が付いています。矢印は主軸とラベル付けされている

Flex アイテムは、主軸でグループとして移動します。 たくさんの要素があり、グループの中で最もふさわしいレイアウトになるように努めています。

交差軸は主軸とは反対方向に走っており そのため、flex-directionrow の場合、交差軸は列に沿って伸びます。

高さの異なる 3 つの箱、左から右を指す矢印が横に並んで配置されている。矢印には「メイン軸」と表示されます。上から下を指す別の矢印があります。これは交差軸というラベルです

交差軸では 2 つのことを実行できます。 アイテムは個別に移動することも、グループとして移動することもできます。これにより、アイテム同士や flex コンテナに対してアイテムを揃えることができます。また、折り返しされたフレックス線がある場合は、それらの線をグループとして扱い、それらの線にスペースを割り当てる方法を制御できます。このガイドでは、この仕組みが実際にどのように機能するかを説明します。まずは、メイン軸が flex-direction の後に続くことを覚えておいてください。

Flex コンテナの作成

異なるサイズのアイテムのグループを取得し、Flexbox を使用して できます。

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Flexbox を使用するには、通常の形式ではなく Flex の書式設定コンテキストを使用することを宣言する必要があります ブロックとインラインレイアウトです そのためには、display プロパティの値を flex に変更します。

.container {
  display: flex;
}

レイアウト ガイドで説明したように、これによりブロックレベルのボックスが表示されます。 指定することもできます フレックスアイテムは、初期値を使用して、すぐにフレックスボックスの動作を開始します。

初期値は次のとおりです。

  • 項目が行として表示されます。
  • 折り返されません。
  • コンテナいっぱいに大きくなることはありません。
  • コンテナの先頭に並べられます。

アイテムの向きを制御する

flex-direction プロパティはまだ追加していませんが、flex-direction の初期値が row であるため、アイテムが行として表示されます。行が必要な場合は、プロパティを追加する必要はありません。 向きを変更するには、プロパティと次の 4 つの値のいずれかを追加します。

  • row: アイテムを行としてレイアウトします。
  • row-reverse: アイテムは Flex コンテナの端から行として配置されます。
  • column: 列としてレイアウトされるアイテム。
  • column-reverse : アイテムは、Flex コンテナの最後から列としてレイアウトされます。

以下のデモで、アイテムのグループを使用してすべての値を試すことができます。

アイテムの流れとユーザー補助機能の逆転

視覚的な表示の順序を HTML ドキュメント内の順序から変更するプロパティを使用する場合は、ユーザー補助に悪影響を及ぼす可能性があるため、注意が必要です。row-reversecolumn-reverse の値はこの良い例です。 並べ替えは論理的な順序ではなく、視覚的な順序に対してのみ行われます。論理的な順序とは、スクリーン リーダーが読み上げる順序を指すため、この点を理解しておくことが重要です。 コンテンツ キーボードを使っている人もそれに準じます。

次の動画では、行を反転したレイアウトで、 キーボード ナビゲーションはビジュアルではなく DOM に従うため、リンク間の Tab キー操作は切断される 表示されます。

この問題は、Flexbox やグリッド内のアイテムの順序を変更できるものが原因で発生する可能性があります。 そのため、並べ替えの際には徹底的なテストを行い、サイトが正しく表示されないことを確認するようにしてください。 人によっては使いにくいと思います

詳細については、次をご覧ください。

書き込みモードと方向

Flex アイテムは、デフォルトで行としてレイアウトされます。 行は、書くモードとスクリプトの方向で文章が流れていく方向に配置されます。つまり、右から左(rtl)のスクリプト ディレクトリを持つアラビア語で作業している場合、アイテムは右側に並べられます。タブ オーダーも右から始まります。これは、アラビア語で文章を読む順序が右から左であるためです。

縦書きモードを使用する場合は 場合、行は上から下に縦に並んで表示されます。 このデモでは、縦書きモードを使用している flex-direction を変更してみてください。

そのため、Flex アイテムのデフォルトの動作は、ドキュメントのライティング モードにリンクされます。 ほとんどのチュートリアルは、英語または他の横向きの左から右の書き込みモードを使用して作成されています。こうすることで、Flex のアイテムが左側に並び、水平に実行されると想定しやすくなります。

メイン軸とクロス軸に加えて、書き込みモードも考慮する必要があるため、Flexbox では上、下、左、右ではなく、開始終了について説明するのがわかりやすいかもしれません。各軸には開始と終了があります。 メイン軸の始点は main-start と呼ばれます。 そのため、Flex アイテムは最初は main-start から並べられます。その軸の終点は main-end です。 クロス軸の始点は cross-start、終点は cross-end です。

上記の用語を示すラベル付きの図

フレックスアイテムのラップ

flex-wrap プロパティの初期値は nowrap です。つまり、コンテナに十分なスペースがない場合、アイテムはオーバーフローします。

1 つの単語が 1 行に 1 つずつ表示されるように縮小されている、内部に 9 つのアイテムがある Flex のコンテナ
並べて見るのに十分なスペースがないため、Flex のアイテムが
表示されます。
最小コンテンツ サイズに達すると、Flex アイテムがコンテナにオーバーフローし始める

初期値を使用して表示されるアイテムは、オーバーフローが発生する前に、min-content サイズまでできるだけ小さく縮小されます。

アイテムをラップするには、Flex コンテナに flex-wrap: wrap を追加します。

.container {
  display: flex;
  flex-wrap: wrap;
}

Flex コンテナがラップされると、複数のFlex 行が作成されます。スペースの分布に関して、各行は新しい Flex コンテナのように動作します。そのため、行をラップする場合は、 行 2 の要素と行 1 の上の行を揃えることはできません。 これが、Flexbox が 1 次元である理由です。グリッドのように両方を同時に設定することはできませんが、1 つの軸(行または列)の配置を制御できます。

flex-flow の省略形

flex-direction プロパティと flex-wrap プロパティは、省略形 flex-flow を使用して設定できます。たとえば、flex-directioncolumn に設定してアイテムの折り返しを許可するには、次のようにします。

.container {
  display: flex;
  flex-flow: column wrap;
}

Flex アイテム内のスペースの制御

コンテナにアイテムの表示に必要なスペースよりも多くのスペースがあると仮定すると、アイテムは先頭に並び、スペースを埋めるように拡大されません。コンテンツ サイズの上限を超えないうちに増え続ける これは、flex- プロパティの初期値が次のためです。

  • flex-grow: 0: アイテムは増加しません。
  • flex-shrink: 1: アイテムは flex-basis よりも小さく縮小される場合があります。
  • flex-basis: auto: アイテムのベースサイズは auto です。

これはキーワード値 flex: initial で表すことができます。 flex ショートカット プロパティ、または flex-growflex-shrinkflex-basis の長い形式が、フレックス コンテナの子に適用されます。

アイテムを大きくし、大きなアイテムに小さなアイテムよりも多くのスペースを割り当てるには、flex:auto を使用します。上記のデモで試すことができます。これにより、プロパティが次のように設定されます。

  • flex-grow: 1: アイテムは flex-basis よりも大きくなる可能性があります。
  • flex-shrink: 1: アイテムは flex-basis より小さくできます。
  • flex-basis: auto: アイテムのベースサイズは auto です。

flex: auto を使用すると、最終的にアイテムのサイズが異なるため、 アイテム間で共有されるスペースは、各アイテムが配置された後に共有されるため コンテンツのサイズの上限を設定します。 そのため、サイズの大きなアイテムはより多くのスペースを獲得できます。すべてのアイテムを強制的にサイズにし、コンテンツの変更サイズを無視する デモでは flex:auto から flex: 1 に変更します。

展開すると次のようになります。

  • flex-grow: 1: アイテムは flex-basis よりも大きくすることができます。
  • flex-shrink: 1: アイテムは flex-basis より小さくできます。
  • flex-basis: 0: アイテムの基本サイズは 0 です。

flex: 1 を使用すると、すべてのアイテムのサイズがゼロになり、Flex コンテナ内のすべてのスペースを分散できます。すべてのアイテムの flex-grow 係数が 1 であるため、すべてのアイテムが均等に拡大し、スペースが均等に共有されます。

アイテムの成長率を異なるものにする

すべてのアイテムに 1 という flex-grow 要素を指定する必要はありません。 フレックスアイテムに異なる flex-grow 係数を指定できます。以下のデモでは、最初のアイテムに flex: 1、2 番目のアイテムに flex: 2、3 番目の flex: 3 があります。 これらのアイテムが 0 から大きくなると、Flex コンテナ内の使用可能なスペースは 6 つに分割されます。1 つ目の部分は最初のアイテムに与えられ、 2 分割部分です。 3 分割で 3 分割します。

autoflex-basis から同じことを行えますが、3 つの値を指定する必要があります。最初の値は flex-grow です。 2 つ目の flex-shrink、 そして 3 つ目の flex-basis です。

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

これはあまり一般的ではないユースケースです。autoflex-basis を使用する理由は、ブラウザがスペースの分布を把握できるようにするためです。アイテムのサイズを、アルゴリズムが決定するレベルより少し大きくしたい場合は、 便利です。

Flex アイテムの並べ替え

Flex コンテナ内のアイテムは、order プロパティを使用して並べ替えることができます。 このプロパティを使用すると、項目を序数グループで並べ替えることができます。アイテムは、flex-direction で指定された方向に配置されます。 選択されます 同じ値を持つアイテムが複数ある場合は、同じ値を持つ他のアイテムとともに表示されます。

次の例は、この順序を示しています。

理解度を確認する

Flexbox に関する知識をテストする

デフォルトの flex-direction

row
デフォルトでは、Flexbox は 1 行に 1 つの項目を収め、最初に項目を並べます。折り返しをオンにすると、子が流れる行が引き続き作成されます。
column
flex-direction を column に設定することは要素をスタックする優れた方法ですが、デフォルト値ではありません。

デフォルトでは、Flex コンテナは子をラップします。

true
ラップが有効になっている必要があります。
false
flex-wrap: wrapdisplay: flex を使用して子をラップする

Flex の子アイテムが圧迫されているように見えます。これを軽減するには、どの Flex プロパティが役立ちますか。

flex-grow
このプロパティは、要素が基本サイズを超えて拡張可能かどうかを表しますが、基本サイズでどのように動作するかを示すものではありません。
flex-shrink
はい。このプロパティは、幅が基準を下回る場合のサイズ設定方法を指定します。
flex-basis
これはサイジングの出発点になりますが、押しつぶされたシナリオのように、幅が基準を下回るサイジング シナリオに対処する方法ではありません。

Flexbox の配置の概要

Flexbox には、アイテムの配置とアイテム間のスペースの分散のための一連のプロパティが用意されています。これらのプロパティは非常に有用だったため、その後独自の仕様に移行されました。 グリッドレイアウトでもよく見られます フレックスボックスを使用している場合の動作については、こちらをご覧ください。

一連のプロパティは 2 つのグループに分類できます。スペースの分散に関するプロパティと、配置に関するプロパティ。スペースを分散するプロパティは次のとおりです。

  • justify-content: 主軸上のスペース分布。
  • align-content: 交差軸上のスペース分布。
  • place-content: 上記の両方のプロパティの設定の省略形。

Flexbox で配置に使用されるプロパティ:

  • align-self: 単一のアイテムを交差軸で揃えます。
  • align-items: すべてのアイテムをグループとして横軸に配置します。

主軸で作業している場合、プロパティは justify- で始まります。 クロス軸では align- で始まります。

メイン軸にスペースを分散する

前述の HTML では、Flex アイテムが行として配置され、メイン軸にスペースがあります。アイテムが Flex コンテナを完全に埋め尽くすほど大きくない。justify-content の初期値が flex-start であるため、アイテムは Flex コンテナの先頭に並べられます。項目は先頭で揃えられ、余分なスペースは末尾に配置されます。

justify-content プロパティを Flex コンテナに追加し、値を flex-end に設定すると、アイテムはコンテナの末尾に並び、余分なスペースが先頭に配置されます。

.container {
  display: flex;
  justify-content: flex-end;
}

justify-content: space-between を使用して、アイテム間のスペースを分散することもできます。

デモでいくつかの値を試し、使用可能な値の全セットについては MDN をご覧ください

flex-direction: column でログイン

flex-directioncolumn に変更すると、justify-content が列で機能します。列として使用するときにコンテナに予備のスペースを確保するには、コンテナに height または block-size。 そうしないと、配布する余分なスペースがなくなります。

さまざまな値を試します。今回はフレックスボックスの列レイアウトを使用します。

フレックス行間のスペースを分散する

折り返しの Flex コンテナを使用すると、交差軸に分散するスペースが確保される場合があります。この場合、align-content プロパティを justify-content と同じ値で使用できます。 デフォルトでアイテムを flex-start に揃える justify-content とは異なり、 align-content の初期値は stretch です。 プロパティ align-content を Flex コンテナに追加して、このデフォルトの動作を変更します。

.container {
  align-content: center;
}

デモで試してみましょう。 この例では、Flex アイテムの行が折り返されており、余分なスペースを確保するためにコンテナに block-size が含まれています。

place-content の省略形

justify-contentalign-content の両方を設定するには、1 つまたは 2 つの値で place-content を使用します。両方を指定すると、1 つ目の値は align-content に、2 つ目の値は justify-content に使用されます。

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

交差軸上のアイテムの配置

クロス軸では、align-itemsalign-self を使用して、フレックス行内のアイテムを配置することもできます。このアライメントに使用できるスペースは、Flex コンテナの高さによって異なります。 折りたたまれた商品セットの場合は Flex 広告申込情報が配信されます

align-self の初期値は stretch です。 デフォルトで、行内の Flex アイテムは最も高いアイテムの高さまで引き伸ばされます。 これを変更するには、任意の Flex アイテムに align-self プロパティを追加します。

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

次のいずれかの値を使用して、項目の位置を調整します。

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

MDN の値の一覧をご覧ください。

次のデモでは、flex-direction: row を含む 1 行の flex アイテムがあります。最後の項目では、Flex コンテナの高さを定義します。 最初の項目の align-self プロパティの値は flex-start です。このプロパティの値を変更して、交差軸上の空間内でどのように変化するかを確認してみましょう。

align-self プロパティは個々のアイテムに適用されます。 align-items プロパティを Flex コンテナに適用すると、個々の align-self プロパティをすべてグループとして設定できます。

.container {
  display: flex;
  align-items: flex-start;
}

次のデモでは、align-items の値を変更して、クロス上のすべてのアイテムをそろえてみます グループ化できます

Flexbox に [理由] が表示されないのはなぜですか?

Flex アイテムはメイン軸上のグループとして機能します。そのため、そのグループから個々のアイテムを分割するコンセプトはありません。

グリッド レイアウトでは、justify-self プロパティと justify-items プロパティがインライン軸で機能し、グリッド領域内のその軸上のアイテムを配置します。Flex レイアウトではアイテムをグループとして扱うため、 これらのプロパティは Flex のコンテキストでは実装されません。

Flexbox は、自動マージンに非常にうまく対応しています。 グループから 1 つのアイテムを分割する必要がある場合や、グループを 2 つのグループに分割する必要がある場合は、マージンを適用して分割できます。次の例では、最後の項目の左側の余白は auto です。自動マージンは、適用される方向のすべてのスペースを吸収します。つまり、アイテムが右に移動し、グループが分割されます。

アイテムを垂直方向および水平方向に中央寄せする方法

位置揃えプロパティを使用すると、アイテムを別のボックスの中央に配置できます。 justify-content プロパティは、アイテムを主軸に揃えます。 行です。交差軸の align-items プロパティ。

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

理解度を確認する

Flexbox に関する知識をテストする

.container {
  display: flex;
  direction: ltr;
}

Flexbox を縦方向に配置するには、次のコマンドを使用します。

キーワードを調整する
ニース
キーワードを正当化する
ごめんなさい
.container {
  display: flex;
  direction: ltr;
}

Flexbox を水平方向に配置するには、次のコマンドを使用します。

キーワードを揃える
ごめんなさい
キーワードを正当化する
ニース
.container {
  display: flex;
  direction: ltr;
}

デフォルトでは、Flex アイテムは stretch に配置されます。コンテンツが必要な場合 使用する場合、次のうちどのスタイルを使用しますか。

justify-content: flex-start
両端揃えのプロパティは、縦方向ではなく横方向の配置用です。
align-content: start
content は、子アイテムの配置ではなく、フレキシブルな線の位置を調整します。
height: auto
変更しても効果はありません。
align-items: flex-start
はい。垂直方向に「上」または先頭に配置します。これにより、デフォルトのストレッチ値が削除され、代わりにコンテンツの高さが使用されます。

リソース