CSSの研究ノート(8)弾性レイアウト

弾性レイアウト上のチュートリアルでは、インターネットがより詳細に記述された多くのことをされているので、ここでは詳しく説明しません。

この記事は、後で使用するためのクイックリファレンスガイドそれであると考えられ、共通の属性を整理します

1、基本的な考え方

  • セットdisplay: flex;と呼ばれる要素のFlexコンテナ、すべてのサブ要素が呼び出されるFlexプロジェクト

  • 容器を位置決めするための2つの軸、それぞれ水平の存在スピンドルと垂直交差軸主軸デフォルトのプログラムに沿って配置され、

(容器に設けられた)2、コンテナのプロパティ

  • 方向フレックス:以下の任意の値、主軸の方向を設定
    • 行(デフォルト):水平方向のスピンドル、左側の出発点
    • 行逆水平方向にスピンドル、右開始点
    • カラム:垂直方向のスピンドル、上部から始まります
    • カラムリバース:垂直方向のスピンドルは、底部から始まります
  • ラップ・フレックス:包装規定された方法を、必要に応じて値を以下
    • NOWRAP(デフォルト):ラップしないでください
    • ラップ:上記の最初の行を包みます
    • ラップリバース:ラップ、最初の行の下に
  • コンテンツ-ザ・正当化:プロジェクトは、スピンドル、以下の任意の値に整列され定義
    • フレックススタート(デフォルト):アライメントの出発点
    • フレックス・エンド:エンド整列
    • センター:揃え
    • スペース間:正当化、均等にプロジェクト間の間隔
    • スペースアラウンド:正当化、プロジェクトの両側に等間隔
  • アイテム-左揃え=:クロス軸配向で定義された項目、次の任意の値
    • フレックススタート:アライメントの出発点
    • フレックス・エンド:エンド整列
    • センター:揃え
    • プロジェクト内のテキストの1行目のベースラインを揃える:ベースライン
    • ストレッチ(デフォルト):プロジェクトの高さを設定または自動に設定されていない場合は、コンテナのプロジェクトの高さを埋めます

(項目上に配置された)3、アイテム属性

  • 順序:順序定義プロジェクトプロパティ整数、前方に配置された小さい方の値を受け入れ、デフォルトは0であります

  • フレックスを成長デフォルトは残りのスペースがあっても意味し、0で、拡大プロジェクトを定義し、また拡大:

    すべてのプロジェクトを1に設定し、左のスペースがあるされている場合、彼らは同じように残りのスペースに分割されます

    プロジェクトは2に設定されている場合は、他のプロジェクトが1に設定され、その後、残りのスペースは、プロジェクトによって占有されている他のプロジェクトの2倍になります

  • フレックスを縮小十分なスペースがあることを示す、減速比定義プロジェクト、デフォルトは1で、収縮します。

    すべてのプロジェクトは、1に設定され、スペースの不足は、彼らがダウンスケーリングされます

    プロジェクトが0に設定されている場合は、他のプロジェクトが1に設定されているその他の項目は通常、狭いながら、そのプロジェクトは、縮小することはありません

  • 基礎-Flexは:余分なスペースを割り当てる前に、スピンドルによって占めプロジェクトスペースは、デフォルトでは、元のプロジェクトのサイズを示す、自動で

  • セルフアライン=左:位置合わせ定義プロジェクト、カバーALIGN-項目が設定され、デフォルトでは親要素に配置された継承を示す、自動で

[参照、その他のCSSシリーズを読んでCSSの研究ノートを ]

おすすめ

転載: www.cnblogs.com/wsmrzx/p/11456509.html