クイックスタート
FlexLayoutは基本的に一方向の分割画面を担当します。
基本的なRow分割
isResizePanel = trueの場合、コンテナの兄弟としてresizePanelがレンダリングされます。例えば、MidコンテナとRightの間にあるresizePanelの所有権はMidにありますが、mid-resizePanelは自分の両側の兄弟を処理します。isResizePanelを付ける必要はありません。最後の要素に付けると、ウェブブラウザ自体のリサイズ機能と重なり、ユーザー体験を損なう可能性があります。以下のように動的にレンダリングする必要がある場合は
isResizePanelを事前にtrueでレンダリングするよりも、stateを使用することをお勧めします。カラム分割 + grow
縦分割で特定の領域比率を事前に付与
つまり、上記のコードではtopコンテナはgrow = 0.45、残りのmid、rightコンテナはgrow = 1.275が割り当てられます。
マルチクロス（ネスト）
二方向以上の分割はFlexLayoutを重ねて生成
（この文書では暗黙的にheightとしての役割をCodeBlockが果たしています。）
同様に、リサイズ可能な余白がない場合もリサイズは動作しません。
その影響を受けたくない場合は、直系の子としてdivを先にラップすることをお勧めします。
また同じ理由で、意図しない動作を防ぎたい場合は、直系の子孫を2つ以上作成しないことをお勧めします。
min/max + isFitContent
リサイズ範囲制限 + コンテンツサイズ基準で制限
FlexLayoutContainerにCSSを使用して最小/最大サイズを指定すると、リサイズされる範囲を調整できます。
またはこのように使用できます。
実行結果は以下の通りです。
内部コンテンツの動的サイズを最大サイズにしたい場合
<FlexLayoutContainer isFitContent>...</FlexLayoutContainer>を使用できます。isFitContentを使用するコンテナは、内部の子要素のサイズより大きくリサイズされません。isFitContentを付与した場合動かせる余白の値よりも移動可能な空間の値が小さいため、完全にリサイズ不可能なレイアウトになります。意図しない場合は、すべてのコンテナにmax sizeの値を付与しないでください。少なくとも1つ以上のコンテナにはmax sizeが付与されていない必要があります。
パネル移動モード (panelMovementMode)
リサイズ時の隣接パネルとの相互作用方法
panelMovementModeは、パネルをリサイズする際に隣接するパネルをどのように移動させるかを制御するプロパティです。デフォルトは divorceで、以下のモードを使用できます。
bulldozer
隣接するパネルを押し出しますが、お互いにくっつきません。
divorce (기본값)
隣接するパネルを押し出し、お互いにくっつきますが、リサイズを開始した位置に戻ると再び分離されます。
stalker
隣接するパネル同士が完全にくっつきますが、最終地点に達したときは再び分離されます。
最終確認
layoutName / containerNameはレンダリングされたDOM要素の idとして使用され、また getLayoutInfos, useDecompositionLayout などのHookで内部Store/Subjectの Keyとして使用されます。
値はページ内で
Uniqueでなければなりません。重複すると内部Keyが衝突し、リサイズ/購読対象が混ざるなど意図しない動作が発生する可能性があります。値は
安定でなければなりません。レンダリングごとに変わったり、条件によって名前が変わると、既存の状態/購読が切れ、「別のレイアウト」として認識される可能性があります。空白や特殊文字は避け、英数字と -, _ を中心とした値を推奨します。
isResizePanel使用時に派生識別子${ContainerName} + '_resize_panel'が追加で作成されます。コンテナの命名を一貫してユニークに保ってください。
isResizePanel
コンテナの兄弟としてリサイズパネルがレンダリングされます。
例: MidとRightの間で、リサイズパネルの所有権はMidにありますが、リサイズパネルは両側の兄弟を扱います。
grow
特定のコンテナの初期比率を「明示」します。
grow未指定のコンテナは、明示されたgrowを除く残りを均等に分配されます。
isFitContent
コンテナが内部の子要素のサイズより大きくリサイズされないように制限します。
panelMovementMode
パネルリサイズ時の隣接パネルとの相互作用の方法を設定します。
"bulldozer"隣接パネルを押し出しますが、くっつきません。
"divorce"隣接パネルを押し出し、くっつきますが、戻ると分離します（デフォルト）。
"stalker"隣接パネル同士が完全にくっつきますが、最終地点に達したときは分離します。