フレックスレイアウト(フレキシブルパウチ)

1つのフレックスレイアウト(フレキシブルパウチ、英語ボックスフレキシブル)
  ディスプレイ:フレックス;と同様のブロック要素
  の表示:インラインフレックス、インライン要素に類似

注:一連のFlexレイアウト後、サブエレメントフロート、クリア、および垂直整列性が失敗します

容器の2つの特性(コンテナが追加される)
2.1フレックス方向(主軸方向)
  の行(デフォルト):主に水平方向に、左から始まります。
  行逆スピンドル水平方向、右端の出発点。
  カラム:メイン垂直方向エッジ上の出発点。
  カラムリバース:垂直方向のスピンドル、低い出発点に沿っ。
2.2フレックスラップ(改行かどうか)
  NOWRAP(デフォルト):ラップしないでください。
  ラップ:ラップ、最初の行の上に。
  ラップリバース:ラップ、最初の行の下に

2.3フレックスフロー

  短いフレックスdirectionプロパティとフレックスラッププロパティがあり、デフォルト値の行NOWRAP

2.4正当化するコンテンツ(スピンドルアライメント)
  フレックススタート(デフォルト):左
  フレックスエンド:右アライメント
  センター:センターの
  スペース間:正当化、項目間の間隔が等しくなっています。
  空間アラウンド:各項目の両側に等間隔。したがって、二回プロジェクトのプロジェクトの大きさと境界の間隔との間のギャップ。
2.5アイテムを揃える(配向軸側)
  フレックススタート:交差軸位置合わせのポイント開始
  フレックスエンド:十字軸整列の端部
  中心:クロス軸が中点に位置合わせされ
  たベースライン:テキスト・アイテムの最初の行のベースライン位置合わせ
  ストレッチを(デフォルト値):プロジェクトの高さがautoに設定するか、設定されていない場合は、コンテナの全体の高さを取り上げます

 2.6 ALIGN-コンテンツ多軸配向

フレックススタート
フレックスエンドの
中央
スペース間の
スペースの周りに
ストレッチを

実装スタイルのサイドシャフトのインコンテンツを揃え、デフォルトでは、ピッチをマージします。単一ラインサブ要素については、プロパティが動作しません。

容器3の性質は、(子要素に追加)

3.1順序(項目の順序)

  値が小さいほど、より前方に配置は、デフォルトは0です。

3.2(プロジェクトの拡大に​​)フレックス成長

  拡大していない空き領域がある場合、デフォルトでは、すなわち、0です。

  すべての項目のフレックス成長属性値が1の場合は(もしあれば)、彼らは残りのスペースをアリコートします。

  2つのプロジェクトの属性値のフレックスは、成長した場合は、他のプロジェクトは1です、その後、残りのスペースは倍以上の他の項目よりも前のことで占められています

3.3 FLX-shink(項目圧縮比)

  デフォルトでは、スペースが不足している場合つまり、プロジェクトが削減される、1です。

  フレックスシュリンク属性値の全てが1である場合がある場合に、十分なスペースが縮小されます。

  フレックスシュリンクプロジェクトがゼロである場合、プロパティの値を、他のプロジェクトは、スペースの不足、前者は収縮しない場合は、1です。

注意:プロパティの負の値が無効です

3.4フレックス基礎(固定設定項目は、スペースを占有)

  フレックス基本属性は、プロジェクトによって占め余分なスペースを、割り当てる前にスピンドルスペースを定義します。

  余分なスペースがあれば、ブラウザは、このプロパティに基づいて、スピンドルを計算します。

  デフォルトでは、プロジェクトの元のサイズということ、autoです。

  それは、(例えば350pxなど)と同じ幅または高さの属性値を設定することができ、プロジェクトは一定のスペースを占有します

3.5フレックス

  Flexプロパティは、成長フレックスフレックス縮小し、フレックスベーシス速記あり、デフォルト値0 1オート。2つのオプションの属性の後。

  オート(1 1オート)およびなし(0 0オート):このプロパティは、2つの迅速な値を持っています

Flexプロパティ:

このプロパティは、スピンドルのサイズ分布は、値は、一般に、デジタル自動で自動的にデジタル数字を共有する自動ブラウザは伸縮項目によって占められる空間の割合に応じて割り当てられる方法を定義する、上記項目の伸縮、引き込み式の項目に追加されます。

スピンドルに設定されたときにプロパティ項目テレスコピックカバーサイズ、スピンドル設定項目サイズ(幅または高さ)と伸縮性に、実際にはまだこの属性空間の割り当てに従うこと。

   伸縮アイテムは幅を有しているが、最終的には空間分割のレベルに比例して屈曲するように設けられているが。

注意:このプロパティを推奨優先使用を使用しての代わりに、単独の3つの別々のプロパティを記述する場合は、ブラウザは相関値を計算しますので。

3.6 ALIGN-セルフ

  ALIGN-自己の属性は、他の項目ではない同じ配向を有する単一のアイテムを可能にALIGN-itemsプロパティをカバーすることができます。

  親は、ストレッチに相当しない場合、デフォルト値は、親要素のALIGN-アイテム属性の継承を示す、自動で

  属性値のautoに加えて、ベタ他の属性は、正確に、アイテムを揃えます

4プロジェクトに余裕を使用

フレキシボックスレイアウトで非常に強力な役割があり、スケーラブルなエントリが特定の方向に設定されているに与えられた場合のマージン自動、その項目は、この方向に自分自身のように、この方向にその方向でスケーラブルな残りのスペースを占有します上の余白

自動;容易に伸縮垂直方向と水平方向のセンタリング要素を実現することができる。我々は、フレキシボックスレイアウトマージンで使用します

 

おすすめ

転載: www.cnblogs.com/glmkeep/p/11363144.html