Flexbox

CSS Podcast - 010: Flexbox

レスポンシブ デザインで注意が必要なデザイン パターンとして、一部のデザイン パターンの 説明します。ビューポートのスペースがある場所、 このパターンはうまくいき、 スペースが密集している場所では 問題となる可能性があります。

Flexible Box Layout Model（Flexbox）は、1 次元コンテンツ用に設計されたレイアウト モデルです。 サイズが異なる多数のアイテムを それらのアイテムに最適なレイアウトを返します

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

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

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

• 行または列として表示できます。
• ドキュメントの書き込みモードが優先されます。
• デフォルトでは 1 行ですが、 複数行に折り返すように求められることがあります。
• レイアウト内のアイテムは 視覚的に並べ替えることができます DOM 内の順序から外れています
• スペースはアイテム内に配置できます。 親の空きスペースに応じて 大きく縮小されます
• ラップされたレイアウトでアイテムと Flex のラインの周囲にスペースを分散できます。 Boxalign プロパティを使っています
• アイテム自体を交差軸で揃えることができます。

主軸と交差軸は

Flexbox を理解するには、主軸と交差軸の概念を理解することが重要です。 主軸は flex-direction プロパティで設定される軸です。 これが row の場合、主軸は行に沿っています。 column の場合、主軸は列に沿っています。

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

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

交差軸では、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 アイテムは、初期値を使用して、すぐに Flexbox の動作を始めます。

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

• アイテムは行として表示されます。
• ラップされません。
• コンテナいっぱいに大きくなることはありません。
• コンテナの先頭に配置されます。

アイテムの向きの制御

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

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

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

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

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

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

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

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

• コンテンツの並べ替え
• Flexbox とキーボード ナビゲーションの切断

書き込みモードと方向

Flex アイテムは、デフォルトで行としてレイアウトされます。 行は、ライティング モードとスクリプトの方向で文の流れる方向に流れます。 アラビア語で作業している場合は 場合、アイテムは右側に並べられます。 タブ順序も右側から始まります。これはアラビア語の文章の読み方と同じになります。

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

そのため、Flex アイテムのデフォルトの動作は、ドキュメントの書き込みモードにリンクされます。 ほとんどのチュートリアルは英語か 業種横断型です 左から右の表記モードです この場合、Flex のアイテムが左側に並べられ、水平に実行されると想定しやすくなります。

主軸、交差軸、記述モードを考慮すると 上、下、左、右ではなく、開始と終了のことを Flexbox の方がわかりやすいかもしれません。 各軸には開始と終了があります。 メイン軸の始点は main-start と呼ばれます。 Flex アイテムはメインスタートから 順調に進んでいます その軸の終点は main-end です。 交差軸の始点はクロススタート、終点はクロスエンドです。

Flex アイテムのラップ

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

</ph> <ph type="x-smartling-placeholder">をご覧ください。

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

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

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

Flex コンテナがラップすると、複数の Flex ラインが作成されます。 スペースの配分に関しては 各行が新しい Flex コンテナとして機能します。 そのため、行をラップする場合は、 行 2 の要素と行 1 の上の行を揃えることはできません。 これがフレックスボックスが 1 次元であることを意味します。 1 つの軸、行、列で配置を制御できます。 両方をまとめることはできません

Flex-Flow の省略形

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

.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-grow、flex-shrink、flex-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 アイテムにはさまざまな flex-grow 要素を指定できます。 以下のデモでは、最初のアイテムに flex: 1、2 番目のアイテムに flex: 2、3 番目の flex: 3 があります。 これらのアイテムが 0 から増加すると、Flex コンテナの使用可能なスペースは 6 つに共有されます。 1 つ目の部分は最初のアイテムで、 2 分割して 3 分割で 3 分割します。

auto の flex-basis からも同じことができますが、その場合は 3 つを指定する必要があります。 使用できます。 最初の値は flex-grow です。 2 つ目の flex-shrink、 そして 3 つ目の flex-basis です。

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

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

Flex アイテムの並べ替え

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

以下の例に、この順序を示します。

理解度をチェックする

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

Flexbox の配置の概要

Flexbox には、アイテムを並び替えたりアイテム間のスペースを配分したりするための一連のプロパティが付属していました。 これらのプロパティは非常に有用だったため、その後独自の仕様に移行されました。 グリッドレイアウトでもよく見られます ここでは、Flexbox の使用時にどのように機能するかを紹介します。

プロパティのセットは 2 つのグループに分類できます。 空間分布のプロパティと配置のプロパティ。 スペースを配分するプロパティは次のとおりです。

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

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

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

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

主軸でスペースを配分する

先ほど使用した HTML では、Flex のアイテムが行として配置されているため、メイン軸にスペースがあります。 Flex コンテナを完全にいっぱいにできるほどアイテムのサイズがありません。 justify-content の初期値のため、Flex コンテナの開始時にアイテムが並びます。 flex-start です。 アイテムは先頭に並び、余分なスペースは末尾にあります。

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

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

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

デモの値をいくつか試してみます。 詳細については、MDN をご覧ください。 指定することもできます。

flex-direction: column でログイン

flex-direction を column に変更した場合、justify-content は次のとおり動作します: クリックします。 列として使用するときにコンテナに予備のスペースを確保するには、コンテナに height または block-size。 そうしないと、分配するための予備の容量がありません。

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

Flex ライン間のスペースの分配

ラップされた 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-content と align-content の両方を設定するには、一方の place-content を使用します。 1 つまたは 2 つの値です 両方の軸で単一の値が使用されるため、 両方を指定すると、最初のものが 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-items を使用して、フレキシブル ライン内のアイテムを配置することもできます。 および align-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 プロパティをすべて 1 つのグループとして設定します。

.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;
}

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

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

リソース

• MDN CSS フレキシブル ボックス レイアウトには、サンプルを含む一連の詳細ガイドが含まれています。
• Flexbox の CSS トリック ガイド
• Flexbox Flex コンテナの作成の流れ
• Flexbox での配置について知っておくべきこと
• フレキシブル ボックスの大きさ
• Flexbox のユースケース
• Chrome DevTools での CSS Flexbox レイアウトの調査とデバッグ