Absolute/Relative Layout
RELATIVE（DEFAULT） デフォルトでは、要素は相対的に配置されます。
つまり、要素はレイアウトの通常の流れに従って配置され、top、right、bottom、leftの値に基づいて、その位置から相対的にオフセットされます。
このオフセットは、兄弟や親要素の位置には影響しない。
ABSOLUTE 絶対位置の場合、要素は通常のレイアウトフローに参加しない。
代わりに兄弟要素から独立してレイアウトされる。
位置はtop, right, bottom, leftの値に基づいて決定される。
Flex Direction
これは、主軸とも呼ばれます。主軸は、子ノードがレイアウトされる方向です。
十字軸は、主軸に垂直な軸、つまり折り返し線がレイアウトされる軸を指します。
ROW (DEFAULT) 子を左から右へ並べます。折り返しが有効な場合、次の行はコンテナの左側の最初の項目の下から始まる。
COLUMN 上から下へ並べる。折り返しが有効な場合、次の行は、コンテナの左上の最初の項目から開始される。
ROW REVERSE 子要素を右から左へ並べる。折り返しが有効な場合、次の行はコンテナの右側の最初の項目の下から始まる。
COLUMN REVERSE 子要素を下から上へ並べる。折り返しが有効な場合、次の行はコンテナの底にある最初の項目の左側から始まる。
Align Self
コンテナ内の子に影響を与えるのではなく、
このプロパティを1つの子に適用して、その親内での配置を変更することができます。
Width and Height
Yogaのwidthプロパティは、要素の内容領域の幅を指定します。同様に height プロパティは、要素のコンテンツ領域の高さを指定します。
widthとheightはどちらも以下の値をとります。
AUTO デフォルト値で、他の子要素、テキスト、画像など、要素のコンテンツに基づいて幅と高さを計算します。
PIXELS 絶対ピクセルで幅／高さを定義します。YOGA ノードに設定された他のプロパティによって、これがノードの最終的な寸法になることも、ならないこともあります。
PERCENTAGE 親の幅と高さに対する割合で、幅と高さを定義します。
FLEX GROW
コンテナ内のスペースが、主軸に沿ってどのように子に分配されるべきかを説明します。
コンテナは、その子をレイアウトした後、その子によって指定されたフレックスグロウ値に従って、残りのスペースを分配します。
Flex grow は、任意の浮動小数点値 >= 0 を受け入れ、0 がデフォルト値です。
コンテナは、その子のフレックス・グロウ値によって重み付けされた残りのスペースを、その子の間に分配します。
FLEX GROW は、コンテナ内のスペースが、主軸に沿ってどのようにその子たちに分配されるべきかを説明します。コンテナは、その子をレイアウトした
後、その子によって指定されたフレックスグロウ値に従って、残りのスペースを分配します。
Justify Content
Justifyコンテンツは、コンテナの主軸内に子要素を配置する方法を記述します。例えば、このプロパティを使用して、フレックス方向を行に設定したコンテナ内で子を水平に、またはフレックス方向を列に設定したコンテナ内で子を垂直にセンタリングすることができます。
FLEX START（DEFAULT） コンテナの子を、コンテナの主軸の始点に揃える。
FLEX END コンテナの子要素をコンテナの主軸の終点に揃える。
CENTER コンテナの子をコンテナの主軸の中心に並べる。
SPACE BETWEEN コンテナの主軸を横切る子のスペースを均等にし、子同士の残りのスペースを分散させる。
SPACE AROUND コンテナの主軸を横切る子供のスペースを均等にし、子供の周りに残りのスペースを配分します。スペースアラウンドを使用すると、スペースが最初の子の先頭と最後の子の末尾に分散されます。
SPACE EVENLY アライメントコンテナの中で、主軸に沿って均等に配置される。隣接するアイテムの各ペア、メイン開始端と最初のアイテム、メイン終了端と最後のアイテムの間隔は、すべて正確に同じになる。
0 件のコメント:
コメントを投稿