フレキシブルボックスモデルのフレックスメソッドの概要

フレキシブル レイアウト

2009 年、W3C は、さまざまなページ レイアウトを簡単、完全、レスポンシブに実現できる新しいソリューション、フレックス レイアウト (エラスティック レイアウト) を提案しました。

従来のボックスモデル:
一般的なレイアウトには、フローティング配置でレイアウトされるボックス モデルを使用します。
ライン要素とインライン ブロック要素は折り返されず、ブロック要素は排他的な行を占有します。 フロートを使用すると、ブロック要素を水平方向に整列させることができます。
ただし、一部の特殊なレイアウトは実装が困難です。垂直方向のセンタリングなど。

フレキシブルボックスを設定すると、ボックス内の要素が行要素とブロック要素に分割されず、floatが無効になります。

フレックス レイアウトを使用する要素は、フレックス コンテナ、または略してコンテナと呼ばれます。
コンテナ内のすべてのサブ要素は、略してアイテムと呼ばれます。

コンテナのプロパティ:

flex-direction: 方向。主軸の

行 (デフォルト値): 主軸は水平であり、開始点は左端にあります。

row-reverse: 主軸は水平であり、開始点は右端にあります。

---

列: 主軸は垂直で、開始点は上端にあります。

column-reverse: 主軸は垂直であり、開始点は下端にあります。

flex-wrap: 1 つの軸が収まらない場合にそれをラップする方法。
nowrap (デフォルト): 行の折り返しなし。
ラップ: 先頭の最初の行をラップします。
wrap-reverse: 以下の最初の行を折り返します。

justify-content: 主軸上の項目の配置。 flex-start (デフォルト): 左揃え
flex-end: 右揃え
center: 中央揃え
space-between: 項目間の間隔が等しくなるように両端に揃えます。

スペースアラウンド: 各アイテムは両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。

align-items: 交差軸上で項目をどのように配置するかを定義します。

flex-start: 交差軸の開始点を揃えます。
flex-end: 交差軸の終点を揃えます。
center: 十字軸の中点を揃えます。
baseline: アイテムのテキストの最初の行のベースライン配置。

ストレッチ (デフォルト値): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占めます。

align-content: 複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。

flex-start: 交差軸の開始点に位置合わせします。
flex-end: 交差軸の終点に位置合わせします。
center: 交差軸の中点に位置合わせされます。
space-between: 交差軸の両端に位置合わせし、軸間の間隔は均等に分散されます。

space-around: 各軸の両側のスペースは等しいです。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。

ストレッチ (デフォルト値): 軸は交差軸全体を占めます。
項目のプロパティ:


order
: 項目の並べ替え順序を定義します。値が小さいほどランクが高くなります。デフォルトは 0 です。

---

flex-grow

: 項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。

すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。 1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。

flex-shrink

: アイテムの縮小率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。

フレックスベース
: 余分なスペースが割り当てられる前にアイテムが占めていた主軸スペース。幅または高さのプロパティと同じ値 (350px など) に設定でき、項目は固定スペースを占有します。

align-self: align-items 属性をオーバーライドすることで、単一の項目を他の項目とは異なる方法で配置できるようにします。デフォルト値は auto で、親要素がない場合は、親要素の align-items 属性を継承します。この属性は 6 つの値を取ることができます。auto を除き、その他の値は align-items 属性とまったく同じです。

flex:0 1 auto; flex:0 0 auto; ズームインまたはズームインの省略形: flex:none;

flex:1 1 auto;

以上がフレキシブルボックスモデルのフレックスメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。