Flex は、「フレキシブル レイアウト」と訳されるフレキシブル ボックスの略語で、ボックス モデルに最大限の柔軟性を提供するために使用されます。「display:flex」を設定するだけで済みます。 ; inline 要素は「display:inline-flex」を実装することで設定できますが、flex レイアウトが設定されている場合、子要素の float、clear、vertical-align 属性は無効になることに注意してください。
1. 基本的な考え方
フレックス レイアウトは、フレックスボックスと呼ばれるレイアウト モデルです。フレックス レイアウトを使用すると、子要素に強力なスペース割り当てと位置合わせの機能が提供されます。
フレックス レイアウトを使用する前に、一般的に使用されるレイアウトには、流体レイアウト、フローティング レイアウト、位置決めレイアウトなどが含まれます。欠点は、子要素が親要素内での位置を制御する必要があり、親要素の高さの折りたたみにも注意を払う必要があることです。
フレックスの利点は、柔軟性のないレイアウト フォームを回避し、選択できるレイアウト モードをより多く作成し、サブ要素の位置合わせ、分散、応答性などの問題を解決できることです。欠点は、独自のレイアウト モードのみに依存しており、わずかな変更がある場合は変更できないことです。
フレックス レイアウトを使用する要素は、フレックス コンテナー、または略して「コンテナー」と呼ばれます。そのすべての子要素は、「アイテム」と呼ばれるフレックス アイテム (フレックス アイテム) と呼ばれるコンテナ メンバーを自動的に生成します。
コンテナにはデフォルトで 2 つの主軸があります。水平主軸 (主軸) と垂直交差軸 (交差軸) です。主軸の開始位置 (つまり、境界線の交点) はメイン開始位置と呼ばれます。終了位置をメインエンド、クロス軸の開始位置をクロススタート、終了位置をクロスエンドといいます。デフォルトでは、項目は主軸に沿って配置されます。単一の項目が占める主軸のスペースはメイン サイズと呼ばれ、単一の項目が占める交差軸のスペースはクロス サイズと呼ばれます。
Flex レイアウトを実装するために、次のプロパティが CSS で提供されます。
さまざまなスコープに従って、これらのプロパティは、コンテナ プロパティ (flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content) と項目プロパティ (order、align -self) の 2 つのカテゴリに分類できます。 、フレックス、フレックス成長、フレックス縮小、フレックスベース）。これらの属性の使用法を紹介しましょう。
2. コンテナのプロパティ
(1) flex-direction : フレキシブルボックス内のサブ要素の配置方向を指定します。
属性のオプションの値は次のとおりです。
flex-direction プロパティは、主軸の方向 (つまり、項目の配置方向) を決定します。
.box{flex-direction:row|row-reverse|column|column-reverse;}この属性には 4 つの値があります
● 行 (デフォルト値): 主軸は水平であり、開始点は左端にあります。
●row-reverse: 主軸は水平であり、開始点は右端にあります。
●column: 主軸は垂直であり、始点は上端にあります。
●column-reverse: 主軸は垂直であり、開始点は下端にあります。
上記の効果を次の図に示します。
(2) flex-wrap : フレキシブルボックス内のサブ要素のラップ方法を指定します。
デフォルトでは、項目は線 (「軸」とも呼ばれます) 上に配置されます。 flex-wrap 属性は、軸を配置できない場合に線を折り返す方法を定義します。次の 3 つの値があります。
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (デフォルト): 行の折り返しなし。配置効果は次のとおりです。
●wrap: ラップ、最初の行が一番上にあり、配置効果は次のとおりです。
●wrap-reverse: ラップ、最初の行が一番下、配置効果は次のとおりです。
(3) flex-flow : このプロパティは、フレックス ボックス コンテナに作用し、コンテナ内の要素の配置方向と行の折り返しを制御するために使用されます。このプロパティは、flex-direction と flex-wrap で構成される複合プロパティです。
.box{flex-flow:<flex-direction><flex-wrap>;}(4) justify-content : この属性は、フレキシブル ボックス コンテナ内のサブ要素に作用し、サブ要素自体の配置方向の分布を制御するために使用されます。
justify-content プロパティは、主軸上の項目の配置を定義します。
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}この属性には 5 つの値があります。
● flex-start (デフォルト値): 左揃え。
●フレックスエンド：右寄せ。
●センター：中心。
●space-between: 両端を揃え、項目間の間隔が等しくなります。
●space-around: 各項目の両側の間隔は等しいため、項目間の間隔は項目と境界線の間の間隔の 2 倍になります。
上記の効果を次の図に示します。
(5) align-items : この属性はフレキシブル ボックス コンテナに作用し、フレキシブル ボックス内のすべてのサブ要素の配置方向の垂直方向の位置合わせを制御するために使用されます。
align-item プロパティは、項目を交差軸上でどのように配置するかを定義します。
.box{align-items:flex-start|flex-end|center|baseline|stretch;}この属性には 5 つの値があります。特定の配置は交差軸の方向に関連します。交差軸は上から下であると想定されます。
●flex-start: 交差軸の開始点を調整します。
●フレックスエンド：十字軸の中点を合わせます。
●center: 十字軸の中点を揃えます。
●baseline: アイテムのテキストの最初の行のベースライン配置。
●stretch (デフォルト値): 項目に高さが設定されていない場合、または自動に設定されている場合、項目はコンテナーの高さ全体を占めます。
上記の効果を次の図に示します。
3. プロジェクトのプロパティ
(1) 順序属性
order 属性は、コンテナ内での項目の表示順序を設定するために使用されます。属性の構文形式は次のとおりです。
注文番号;
ここで、number はコンテナ内の項目の位置であり、デフォルト値は 0 です。
例：
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child(2){order:1;}.flexdiv:nth-child(3){order:2;} .flexdiv:nth-child(4){order:5;}.flexdiv:nth-child(5){order:4;</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>実行結果:
(2) align-self属性
align-s elf 属性を使用すると、項目に他の項目とは異なる配置を設定できます。この属性は、align-items 属性の値をオーバーライドできます。 align-self 属性のオプションの値は次のとおりです。
例：
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60px;height:60px;border:1pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</ div><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>実行結果:
(3)フレックス属性
flex 属性は、flex-grow、flex-shrink、flex-basis の 3 つの属性の略称です。構文形式は次のとおりです。
flex:flex-growflex-shrinkflex-basis;
パラメータの説明は次のとおりです。
● flex-grow: (必須パラメータ) 他の項目に対する相対的な項目の増加量を設定するために使用される数値。デフォルト値は 0 です。
●flex-shrink: (オプションのパラメータ) 他の項目に対する相対的な項目の縮小を設定するために使用される数値。デフォルト値は 1 です。
●flex-basis：（オプションのパラメータ）項目の長さ、有効な値はauto（デフォルト値、自動を示す）、inherit（親要素からこの属性の値を継承することを示す）、または%、px、emを追加したものです。 、などを特定の値に変換する単位の形式。
さらに、flex 属性には 2 つのショートカット値、つまり auto (1 1 auto) と none (0 0 auto) があります。
サンプルコードは次のとおりです。
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.flexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div ><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div></body>< /html>実行結果:
