Create Resizable Flexbox Elements In Pure JavaScript – Resizer.js

Preview:

Description:

The Resizer.js JavaScript library allows the user to resize a flexbox element using drag and drop.

Install the library via NPM:

$ npm install resizerjs

How to use it:

Download and place the Resizer.js script at the end of your html document.

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

Initialize the Resizer.js on the target element:

const selector = '.rz-demo'
let resizer = new Resizer(selector)

Remove the drag handler.

Resizer.removeBySelector(selector)

Customize the drag hanlder in your CSS.

[data-rz-handle] {
  flex: 0 0 6px;
  background-color: rgba(0, 0, 0, 0.5);
}
[data-rz-handle] div {
  width: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}