Lightweight Customizable jQuery Split Layout Plugin - flexLayout

File Size: 1.44 MB
Views Total: 3373
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight Customizable jQuery Split Layout Plugin - flexLayout

flexLayout is a lightweight and highly customizable jQuery plugin used for generating a horizontal or vertical split layout with any number of resizable content sections. Heavily based on CSS3 flexbox mode. A great alternative to the legacy frame element.

Basic usage:

1. Place jQuery library and the jQuery flexLayout plugin' script at the bottom of the webpage.

<script src="//"></script>
<script src="flexlayout.js"></script>

2. Config the split layout using JavaScript arrays as follow:

var layoutConfig = [

    // block1:block2:block3 = 1:2:3
    ['1', '2', '3'],

    // block1 = 100px
    // block2:block3 = 1:3
    ['100px', '1', '3']

3. Render the split layout inside a specified container.


4. Pass the following options as the second parameter to the flexlayout() function.


  /*defines the height of the requesting element; '...string...'*/
  height: '100%',

  /*defines the width of the requesting element '...string...'*/
  width: '100%',

  /*defines the direction of the layout; 'h', 'v' or ['h', 'v', 'v', ...]*/
  dir: 'h',

  /*defines whether the width/height of created blocks can be adjusted or not, boolean or [boolean, boolean]*/
  adjust: false,

  /*defines the style of divide bars between created blocks, {...css object}, '...string of class name...', boolean or [..., ..., ..., ...]*/
  bars: {flex: '0 0 1px', 'background-color': '#DEDEDE'}


Change log:


  • fixed cached bars, cannot be found bug;


  • v0.3.1

This awesome jQuery plugin is developed by patrichu. For more Advanced Usages, please check the demo page or visit the official website.