ホームページ > 記事 > ウェブフロントエンド > フレックスレイアウトの詳しい説明
今回は flex レイアウトの詳細な説明をお届けします。 flex レイアウトの詳細な説明の 注意点 について、実際の事例を見てみましょう。
垂直方向の中央揃えは、一般的な ページ レイアウト の方法です。インライン要素の場合は、 text-align:center;vertical-align:center を設定して、それを実現できます。
ブロックレベルの要素の場合は、通常、次の方法で実現できます。以下の設定
.parent{ position: relative; }.child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
ただし、CSS のシンプルさとエレガントさのために、インライン、インラインブロック、ブロック レイアウトに加えて、4 番目の CSS レイアウト方法 flex が登場しました。 以下の設定だけで要素を簡単に垂直方向に中央揃えにすることができます。設定
.parent{ display: flex; justify-content: center; align-items: center; }注: フレックスレイアウトに設定すると、子要素の float、clear、vertical-align 属性は無効になりますflexフレックスレイアウトを使用する要素はフレックスコンテナと呼ばれます。要素内のすべての子要素はフレックス項目と呼ばれます。
コンテナにはデフォルトで 2 つの軸があります: 水平主軸と垂直交差軸です。
主軸の開始位置(境界線との交点)をメインスタート、終了位置をメインエンド、クロス軸の開始位置をクロススタート、終了位置をクロスエンドと呼びます。
デフォルトでは、アイテムは主軸に沿って配置されます。単一のアイテムが占める主軸のスペースはメイン サイズと呼ばれ、単一のアイテムが占める横軸のスペースはクロス サイズと呼ばれます。
flex-direction flex-wrap flex-flow justify-content align-items align-content flex-directionflex-directionプロパティは主軸の方向を決定します。 row (デフォルト値): 主軸は水平方向、始点は左端です。 row-reverse: 主軸は水平方向、始点は右端です。 column: 主軸は垂直方向であり、始点は上端にあります。 column-reverse: 主軸は垂直方向であり、始点は下端にあります。 flex-wrap デフォルトでは、項目は主軸に配置されます。 flex-wrap 属性は、主軸の行を配置できない場合に折り返す方法を定義します。 nowrap (デフォルト値): 行の折り返しなし wrap: 行の折り返し、最初の行が上部にあります wrap-reverse: 行の折り返し、最初の行が下部にあります flex-flowflex -flow プロパティは flex-direction プロパティと flex-wrap プロパティの短縮形です。
デフォルト値は row nowrap です。
order flex-grow flex-shrink flex-basis flex align-self orderorder属性は項目の順序を定義します。値が小さいほどランクが高くなります。デフォルトは 0 です。 flex-grow flex-grow 属性は、項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。
すべての項目の flex-grow プロパティが 1 の場合、残りのスペースを均等に分割します。
1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。
すべてのアイテムのフレックスシュリンクプロパティが1の場合、スペースが不足すると、すべてのアイテムが比例して縮小されます。
1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不足している場合、前者は縮小されません。
このプロパティには負の値は無効です。
この属性に基づいて、ブラウザは主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。
幅または高さの属性と同じ値 (350px など) に設定でき、その場合、アイテムは固定スペースを占有します。
この属性には 2 つのショートカット値があります: auto (1 1 auto) と none (0 0 auto)。
align-self 属性を使用すると、単一のアイテムを他のアイテムとは異なる方法で配置でき、align-items 属性をオーバーライドできます。
デフォルト値: auto。親要素がない場合は、親要素の align-items 属性を継承することを意味します。
この属性は 6 つの値を取ることができ、auto を除き、他の値は align-items 属性とまったく同じです。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がフレックスレイアウトの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。