Quick Start

FlexLayout primarily handles split screens in one direction.

Basic Row Split

tsx

<FlexLayout layoutName="basic-row_1" direction="row">
  <FlexLayoutContainer containerName="basic-row_1-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-right">
    <div>Right</div>
  </FlexLayoutContainer>
</FlexLayout>

Notes

isResizePanel = trueIn this case, the resizePanel will be rendered as a sibling of the container. For example, the ownership of the resizePanel between the Mid container and Right is with Mid, but the mid-resizePanel handles its siblings on both sides.

Warning

In most use cases, there is no need to attach it to the last element. isResizePanelIf attached to the last element, it may interfere with the browser's own resize functionality, negatively impacting user experience.

When it needs to be rendered dynamically as below, isResizePanelit is recommended to use state rather than rendering it as true in advance.

tsx

<FlexLayout layoutName="basic-row_2" direction="row">
  <FlexLayoutContainer containerName="basic-row_2-mid" isResizePanel>
    <div>
      <div>Mid</div>
      <button onClick={() => startTransition(() => setIsTwoRight(prev => !prev))}>ToggleIsTwoRight</button>
    </div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_2-right" isResizePanel={isTwoRight}>
    <div>Right</div>
  </FlexLayoutContainer>

  {isTwoRight ? 
    <FlexLayoutContainer containerName="basic-row_2-right2">
      <div>Right To Right</div>
    </FlexLayoutContainer> : <></>
  }
</FlexLayout>

Column Split + grow

Pre-assign specific area ratios in vertical splits.

tsx


  <FlexLayout layoutName="basic-column_3" direction="column">
    <FlexLayoutContainer containerName="basic-column_3-top" isResizePanel grow={0.45}>
      <div>Left</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="basic-column_3-mid">
      <div>Mid</div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-column_3-right">
      <div>Right</div>
    </FlexLayoutContainer>
  </FlexLayout>

Notes

If grow is not specified, the remaining values excluding the explicitly specified grow value will be evenly distributed among containers without a specified grow.
Thus, in the above code, the top container is assigned grow = 0.45, while the remaining mid and right containers are assigned grow = 1.275.

Caution

It is recommended that the value of grow specified via props does not exceed the number of containers.

Multi-Cross (Nested)

Splits in more than one direction are created by overlapping FlexLayouts.

tsx


  <FlexLayout layoutName="basic-row_4" direction="row">
    <FlexLayoutContainer containerName="basic-row_4-left" isResizePanel>
      <div>
        <FlexLayout layoutName="basic-row_4-basic-column-left" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-left-top" isResizePanel>
            <div>left-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-left-bottom">
            <div>left-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-row_4-right">
      <div >
        <FlexLayout layoutName="basic-row_4-basic-column-right" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-right-top" isResizePanel>
            <div>right-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-right-bottom">
            <div>right-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>
  </FlexLayout>

Notes

Since FlexLayout is based on CSS flex, when the direction is set to column, resizing may not work if the height of the parent is not determined (e.g., auto).
(In this document, CodeBlock implicitly serves the role of height.)
Similarly, resizing will not work if there is no available space for resizing.

Notes

FlexLayoutContainer passes the necessary style configurations for resizing, such as width: 100% and height: 100%, to its direct descendants.
If you do not want to be affected by this, it is recommended to wrap a div as a direct descendant first.
For the same reason, it is recommended not to create more than two direct descendants if you want to prevent unintended behavior.

min/max + isFitContent

Resize range limit + content size based limit

By specifying minimum/maximum sizes using CSS in FlexLayoutContainer, you can control the resize range.

tsx

const [handleSizeTarget, setHandleSizeTarget] = useState<HTMLElement|null>(null);

useEffect(()=>{
  const layoutSubscribe = getLayoutInfos('basic-row_7').subscribe((layout)=>{
    const leftContainer = layout.container?.['basic-row_7-left']?.current;
    if(leftContainer){
      setHandleSizeTarget(leftContainer);
    }
  });
  return ()=>{
    layoutSubscribe.unsubscribe();
  }
},[])

useEffect(()=>{
  if(!handleSizeTarget) return;
  handleSizeTarget.style.minWidth = '25px';
  handleSizeTarget.style.maxWidth = '180px';
},[handleSizeTarget])

Alternatively, you can use it like this.

tsx

const { layout: containers, container, resizePanel } = useDecompositionLayout({
  layoutName: 'basic-row_7',
  containerName: 'basic-row_7-left',
});

useEffect(()=>{
  if(!container) return;
  container.style.minWidth = '25px';
  container.style.maxWidth = '180px';
},[container])

The execution result is as follows.

tsx

<FlexLayout layoutName="basic-row_7" direction="row">
  <FlexLayoutContainer containerName="basic-row_7-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_7-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>
  <FlexLayoutContainer
    containerName="basic-row_7-right"
    isFitContent
  >
    <div
      style={{
        whiteSpace: "nowrap",
        textWrapMode: "nowrap",
        paddingRight:'1rem'
      }}
    >
      I'm Using Fit Content{" "}
    </div>
  </FlexLayoutContainer>
</FlexLayout>

Notes

After useEffect, the left container will not shrink below 25px and will not grow above 180px.
If you want to set the dynamic size of internal content to the max size <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>you can use it. A container using isFitContent will not resize larger than the size of its internal child elements.

Warning

In this example, if you assign isFitContentto the Mid Container,
the available movable space becomes smaller than the space required for movement, making the layout completely non-resizable. Unless this is intended, do not assign a max size to every container. At least one container should not have a max size.

Panel Movement Mode (panelMovementMode)

Interaction method with adjacent panels during resize

panelMovementModeis a property that controls how adjacent panels move when resizing the panel. The default value is divorceand the following modes can be used.

bulldozer

Pushes away adjacent panels but does not stick to each other.

divorce (기본값)

Pushes away adjacent panels and sticks to each other, but separates again when returning to the position where resizing started.

stalker

Adjacent panels completely stick to each other but separate again when reaching the end.

tsx

const [mode, setMode] = useState<"bulldozer" | "divorce" | "stalker">("bulldozer");

<ButtonGroup variant="outlined" size="small">
  {["bulldozer", "divorce", "stalker"].map((m) => (
    <Button
      key={m}
      onClick={() => setMode(m)}
      variant={mode === m ? "contained" : "outlined"}
    >
      {m}
    </Button>
  ))}
</ButtonGroup>

<Box
  sx={{
    height: "100%",
    "& [data-container_name]": {
      minHeight: "2rem",
    },
  }}
>
  <FlexLayout
    layoutName={`panel-movement-demo-${mode}`}
    direction="column"
    panelMovementMode={mode}
  >
    <FlexLayoutContainer containerName="panel-top" isResizePanel>
      <div>Top</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid1" isResizePanel>
      <div>Mid 1</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid2" isResizePanel>
      <div>Mid 2</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-bottom">
      <div>Bottom</div>
    </FlexLayoutContainer>
  </FlexLayout>
</Box>

Last Checking

layoutName / containerName

layoutName / containerNameis used as the idof the rendered DOM Element, and also getLayoutInfos, useDecompositionLayout use it as the internal Store/Subject Key.

The value must be Uniqueunique within the page. If duplicated, internal keys may conflict, causing unintended behavior such as mixed resize or subscription targets.
The value must be StableIt must be done. If it changes with each render or the name changes based on conditions, the existing state/subscription may be interrupted and recognized as a 'different layout'.
Avoid spaces/special characters; values based on English/numbers, -, and _ are recommended.
isResizePanel Derived identifier when used${ContainerName} + '_resize_panel' will be created additionally. Keep container naming consistent and unique.

isResizePanel

The resize panel will be rendered as a sibling of the container.

For example: Between Mid and Right, the ownership of the resize panel is with Mid, but the resize panel handles both siblings.

grow

Specifies the initial ratio of a specific container.

Containers without grow specified will evenly distribute the remaining space excluding the specified grow.

isFitContent

Limits the container from resizing larger than the size of its internal child elements.

panelMovementMode

Sets the interaction method with adjacent panels during panel resize.

"bulldozer": Pushes adjacent panels away but does not stick.

"divorce": Pushes adjacent panels away and sticks, but separates when returning (default).

"stalker": Adjacent panels completely stick together but separate when reaching the end.