The CSS Podcast - 010: Flexbox
レスポンシブ デザインで注意が必要なデザイン パターンとして、一部のデザイン パターンの 説明します。ビューポートのスペースがある場合は、このパターンが適切ですが、スペースが限られている場合は、固定レイアウトが問題になる可能性があります。
フレキシブル ボックス レイアウト モデル(flexbox)は、1 次元のコンテンツ用に設計されたレイアウト モデルです。サイズが異なる多数のアイテムを それらのアイテムに最適なレイアウトを返します
これは、このサイドバー パターンに最適なレイアウト モデルです。Flexbox はサイドバーやコンテンツをインラインで 配置できるだけでなく スペースが足りない場合は、サイドバーが新しい行に表示されます。 ブラウザが従う固定のサイズを設定する代わりに、フレックスボックスを使用して柔軟な境界を指定し、コンテンツの表示方法をヒントとして提供できます。
Flex レイアウトでできること
Flex レイアウトには次の機能があります。 これについてはこのガイドで説明します
- 行または列として表示できます。
- ドキュメントの書き込みモードを尊重します。
- デフォルトでは 1 行ですが、複数行に折り返すように指定することもできます。
- レイアウト内のアイテムの並べ替えや DOM 内の順序から外れています
- スペースはアイテム内に配置できます。 親の空きスペースに応じて 大きく縮小されます
- 折り返しレイアウトのアイテムと Flex 行の周囲にスペースを配置するには、Box Alignment プロパティを使用します。
- アイテム自体は交差軸に沿って配置できます。
メイン軸とクロス軸
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-direction
プロパティはまだ追加していませんが、flex-direction
の初期値が row
であるため、アイテムが行として表示されます。行が必要な場合は、プロパティを追加する必要はありません。
向きを変更するには、プロパティと次の 4 つの値のいずれかを追加します。
row
: アイテムを行としてレイアウトします。row-reverse:
アイテムは Flex コンテナの端から行として配置されます。column
: 列としてレイアウトされるアイテム。column-reverse
: アイテムは、Flex コンテナの最後から列としてレイアウトされます。
以下のデモで、アイテムのグループを使用してすべての値を試すことができます。
アイテムの流れとユーザー補助機能の逆転
視覚的な表示の順序を HTML ドキュメント内の順序から変更するプロパティを使用する場合は、ユーザー補助に悪影響を及ぼす可能性があるため、注意が必要です。row-reverse
と column-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
です。つまり、コンテナに十分なスペースがない場合、アイテムはオーバーフローします。
初期値を使用して表示されるアイテムは、オーバーフローが発生する前に、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-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-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 に関する知識をテストする
デフォルトの flex-direction
は
row
column
デフォルトでは、Flex コンテナは子をラップします。
flex-wrap: wrap
と display: 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-direction
を column
に変更すると、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-content
と align-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-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
プロパティをすべてグループとして設定できます。
.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