フレックスの概要

フレックスの概要

弾性ボックスモデル(フレックス)は、我々は一般的コースフレックス使用カセット複数のブロックに加えて、非常に柔軟で水平に配置された、我々はまた、水平および垂直の同じ行のカセットの複数の屈曲線を使用することができるから、ページレイアウトを実現するために使用しますエフェクトの配列方向は、そのようなラインスパン複数のタグとして、我々はフレックス添加した属性を表示することができ、その水平方向の位置合わせをしたい場合、正当化コンテンツ、-間の空間は、水平方向を含む、実現することができるの値を、我々は異なるたいですボックスの垂直方向の高さが中央に配置され、ALIGN-項目またはALIGN-コンテンツを使用することができる、中央属性値を実現することができ、もちろん、所望の他の効果ならば、異なる属性及び属性値を取ることができます。

次のようにフレックス設定された表示プロパティ(弾性ボックスモデル)は、第一の従来のカセットブロックが配置されました:

ここに画像を挿入説明
ディスプレイプロパティ値のフレックスを設定した後、水平に配置されたブロック要素を達成することができます。
ここに画像を挿入説明

コンテナのプロパティ

図1に示すように、屈曲方向がサブ要素(すなわち、プロジェクトの配列方向)の配向方向を決定するために
、列のデフォルト値、スピンドルの水平方向、左から右へのサブ要素:値1
ここに画像を挿入説明
行リバース:水平スピンドル値2方向、逆の順序(フレックス方向:行逆に、容器の右端から始まる 。);
ここに画像を挿入説明
値3:コラム、クロス軸配置(フレックス方向:カラム;)
ここに画像を挿入説明
値4:列反転、ボックスになるように逆順(フレックス方向:リバースカラム;)を達成する交差軸
ここに画像を挿入説明
2は、フレックスフィットライン所定の折り返し方法を改行する場合。
要素の幅がコンテナの幅の合計よりも大きい場合、ラップが参加するかどうか、コンテナの量がデフォルトになり、すべての項目が並んでランク付けされ、フレックスラップ定義する方法排出ラインラップの場合よりも少ないです。:それは3つの値がある
(1)NOWRAP(デフォルト):ラップされていません。ボックスの合計幅は、容器の幅よりも大きい場合であってもラップしない
ここに画像を挿入説明
(2)ラップ:ラップ、余剰の挟み込みなしラップする(フレックスラップ:ラップ);
ここに画像を挿入説明
(3)ラップリバース:ラインフィードだけでなくラップするだけでなく、ボトムアップから逆順インチ (フレックスラップ:ラップ逆 ;)
ここに画像を挿入説明

正当化 - コンテンツは##タイトル整列方法のスピンドル上で定義されています

このプロジェクトは、スピンドル上に整列される定義、コンテンツを正当化します。:それは、6つの可能な値を有する
スタートフレックス(デフォルト)は、スピンドルの開始位置から開始して配置されたスピンドルの開始位置に位置合わせされる(1)。(正当化-コンテンツ:スタートフレックス;)
ここに画像を挿入説明
(2)エンド・フレックス:従ってメインシャフトの端部に当接し、スピンドルの端部に位置合わせ位置が、要素の順序に影響を及ぼしません。(正当化-コンテンツ:エンドフレックス;)
ここに画像を挿入説明
(3)センターを中心に(正当化コンテンツを:センター;)主軸方向を中心に
ここに画像を挿入説明
、正当化、それは要素の左右端部がなることに留意されたい(4)空間の間空間が等しく、残りの要素間の容器、残りの(長軸方向)の左右両側に反しています。(正当化-コンテンツ:スペースBETWEEN);
ここに画像を挿入説明
(5)スペースの周りには、分散整列し、構成要素は、左及び容器の左右の右両端に当接しないことに留意されたい(両端と平均差で整列し、整列の区別に注意してください)、容器(主軸方向)の残りの空間は、均等長軸方向が水平または垂直であることをその開始およびスピンドルの端部(音符の方向に要素によって分配)側(元素から左右、したがってのみのエッジ要素の両側の容器間の距離の半分)。(正当化-コンテンツ:スペースBETWEEN);
ここに画像を挿入説明
(6)空間EVENLY;均一に、それはすべての方向主容器内の平均のすべての残りのスペースを割り当てることで、分散液は、整列との差が、各要素とスピンドルとの間の距離であります開始要素の端縁と容器の側面との間の距離は、同じ一般的な方向です。(正当化コンテンツ:スペース均等 ;)
ここに画像を挿入説明

ALIGN-アイテムプロジェクトはクロス軸(縦軸)に配向している方法を定義

ALIGN-項目が属性項目が十字軸上に整列されるべきである(また、スピンドルが方向を変更した場合ことに注意してください)を定義します。これは、5つの値をとることがあります。詳細な配向方向、以下が想定される上から下への軸に関連する、交差軸と交差します。
(1)フレックススタート:クロス軸アライメント(デフォルト値)の出発点。(整列は、左の項目を=:フレックススタート;)
ここに画像を挿入説明
(2)エンド・フレックス:エンドクロス軸アラインメント。;:(フレックスエンド合わせは、左の項目を=)
ここに画像を挿入説明
(3)センター、整列中心軸の横断方向(ALIGN-アイテム:中心)
ここに画像を挿入説明

ALIGN-コンテンツが複数の軸を画定する(マルチライン)アラインメント

(1)フレックススタート:交差軸位置合わせの開始点;(ALIGN =左コンテンツ:フレックススタート;)
ここに画像を挿入説明
(2)フレックス終了:膨潤点配置を交差軸(ALIGN =左コンテンツ:フレックスエンド);
ここに画像を挿入説明
(3) :中心は、中間点と交差する軸;(中央コンテンツALIGN =左)
ここに画像を挿入説明
要素が容器(両端間の区別に注意してくださいの側面に対して軸の両端交差していないことに留意すべきで、分散が整列され、そして、空間の周囲(4)。交差軸の両側の方向(クロス方向が水平または垂直軸であることに注意)(したがって、クロスシャフトを位置合わせし、平均配向との差)、均一にそれらの開始までの要素の容器(クロス軸方向)における残りのスペースと終了容器の半分のエッジの両側からの要素)の要素との間の距離。(コンテンツALIGN =左:スペースBETWEEN;)
ここに画像を挿入説明
スペースその間;揃え、プロジェクトの両端が容器の左右両側に対する交差軸(長軸方向)を有するであろうことに留意されたい空間の残りから(5)。均等要素を残り。;:( -との間の空間をコンテンツALIGN =左)
ここに画像を挿入説明
スペースEVENLY(6);均一に、軸方向と交差する空間を残り全ての容器に均一に有することであり、分散の差が整列され、各項目間の距離とクロス軸方向及びプロジェクトの終了は、容器リムの側面との間の距離は、スタートとして大きいです。(ALIGN-含量:スペース均等 ;)
ここに画像を挿入説明

プロジェクトのプロパティ

フレックス成長1;デフォルト値は、親コンテナ除算残りの空間に設けられたサブフレックスコンテナ0であり、我々はより高い重みがそれぞれのアイテム間の加重値を割り当てられ、大きなに値を設定することができます。
元々の容器中にそのような項目は、このような方法で配置されている(フルコンテナをサポートしていない)
ここに画像を挿入説明
カセット3にプロテーゼがフレックスグローが設けられ、ボックス3は、残りの空間充填された容器(スピンドル上フレックス成長保持する:1。図に示すように)
ここに画像を挿入説明
2、注文属性は、ソート項目を定義し、値が小さいほど、より多くのフォワード構成は、デフォルト値は、例えば、0であり、我々はボックス1,2の属性値にボックス2、ボックス4に値3属性3 、箱1が4であるので、サブボックス1234の順序は3241となるであろう。
ここに画像を挿入説明
図3に示すように、フレックス収縮属性項目の減速比を規定するデフォルト値は1であるすべての項目がデフォルト属性値1である場合に十分なスペースがある場合に、、、縮小されるであろう。プロジェクトはこれでプロパティが0、1、他のデフォルトの場合、スペースの不足は、前者が収縮しないとき。以下に示すように、箱4フレックス収縮属性値が0に設定されている、空間の不足、箱4が低減されていないデフォルト他のカセット1、(このプロパティは、負ではありません)。
ここに画像を挿入説明
4、フレックス基本属性は、プロジェクトによって占められ、余分なスペースを割り当てる前に、スピンドルスペースを定義します。ブラウザは、スピンドルに十分な空き領域があるかどうかを計算するために、このプロパティに基づいて。自動車のデフォルト値(プロジェクトの元のサイズ)。
図5に示すように、フレックス成長し、フレックス収縮及びフレックス坪短縮形であるフレックスプロパティ、デフォルト値0 1自動2つの値は、必要(デフォルト)に対してそれらの値かどうかに応じて選択することができるだけでなくそれらの間の順序に注意してください。
図6に示すように、単一のアイテムにALIGN-自己の属性セットは、単一の項目と他の項目は、異なる配列を(重量はALIGN-アイテム属性のデフォルト値の自動よりも大きい)を有することができることが可能になります。

公開された19元の記事 ウォンの賞賛0 ビュー302

おすすめ

転載: blog.csdn.net/Joey_Tribiani/article/details/103095521