The most basic example with two fixed panes vertically arranged. By default each ReflexElement will be equally arranged within its ReflexContainer. To specify a custom arrangement, you can use flex={number in [0.0, 1.0]} property.

  Basic example with two resizable panes vertically arranged: placing a ReflexSplitter draggable component between two ReflexElements will allow those elements to be manually resized by user.

  Example with two splitters propagating the drag: this is where Re-Flex really makes the difference between any other layout library you can find out there.

  Setting the propagate={true} property on the ReflexSplitter components will propagate the drag all the way from right to left or left to right (respectively up and down for an horizontal layout) depending on user interaction. In that demo minSize and maxSize properties are also specified on the middle pane, Re-Flex will respect those attributes when dragging and propagating the offset applied by user.

  Example with three splitters propagating the drag, same as example above but one more splitter just for fun ...

  A more advanced example with multi-nested resizable layouts using events: while dragging a splitter the affected panes will get a different background color, illustrating how you can use Re-Flex events to perform some additional custom logic.

  The ReflexResizer components are only required to fix Safari behavior, which does not handle properly nested flex layouts. This component will resize to fill its parent container setting explicit width and height CSS properties and not "100%".

  A more verbose example that illustrates how to programmatically control the size of ReflexElements.

  Clicking the (- / +) buttons in the control bar above each pane will respectively minimize or maximize that pane into the allocated layout space.

  Clicking the (=) button will lock the pane to its current size. Click the button again to unlock it.