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 やグリッド内のアイテムの順序を変更できるものが原因で発生する可能性があります。 そのため、並べ替えを行う場合は、入念なテストを行い、サイトが正しく表示されないことを確認するようにしてください。 人によっては使いにくいと思います
詳細については、次をご覧ください。
書き込みモードと方向
Flex アイテムは、デフォルトで行としてレイアウトされます。 行は、ライティング モードとスクリプトの方向で文の流れる方向に流れます。 アラビア語で作業している場合は 場合、アイテムは右側に並べられます。 タブ順序も右側から始まります。これはアラビア語の文章の読み方と同じになります。
縦書きモードを使用する場合は
場合、行は上から下に縦に並んで表示されます。
このデモでは、縦書きモードを使用している flex-direction
を変更してみてください。
そのため、Flex アイテムのデフォルトの動作は、ドキュメントの書き込みモードにリンクされます。 ほとんどのチュートリアルは英語か 業種横断型です 左から右の表記モードです この場合、Flex のアイテムが左側に並べられ、水平に実行されると想定しやすくなります。
主軸、交差軸、記述モードを考慮すると 上、下、左、右ではなく、開始と終了のことを Flexbox の方がわかりやすいかもしれません。 各軸には開始と終了があります。 メイン軸の始点は main-start と呼ばれます。 Flex アイテムはメインスタートから 順調に進んでいます その軸の終点は main-end です。 交差軸の始点はクロススタート、終点はクロスエンドです。
Flex アイテムのラップ
flex-wrap
プロパティの初期値は nowrap
です。
つまり、コンテナ内に十分なスペースがない場合、アイテムはオーバーフローします。
初期値を使用して表示されるアイテムは、できる限り小さくなります。
オーバーフローが発生する前に 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 に関する知識をテストする
デフォルトの flex-direction
は次のとおりです。
row
column
デフォルトでは、Flex コンテナは子をラップします。
flex-wrap: wrap
と display: flex
を使用して子をラップするFlex の子アイテムが圧迫されているように見えます。これを軽減するには、どの Flex プロパティが役立ちますか。
flex-grow
flex-shrink
flex-basis
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; }
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