https://github.com/grapesjs/blocks-flexbox
Add the flexbox block
https://github.com/grapesjs/blocks-flexbox
Last synced: 9 months ago
JSON representation
Add the flexbox block
- Host: GitHub
- URL: https://github.com/grapesjs/blocks-flexbox
- Owner: GrapesJS
- License: bsd-3-clause
- Created: 2017-12-10T19:02:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-12T11:50:39.000Z (about 3 years ago)
- Last Synced: 2025-08-28T19:35:09.239Z (10 months ago)
- Language: TypeScript
- Homepage: https://codepen.io/artf/full/qpWBRW/
- Size: 119 KB
- Stars: 39
- Watchers: 5
- Forks: 34
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrapesJS Blocks Flexbox
This plugin adds the Flexbox block which allows creating easily flexible and responsive columns
[Demo](https://codepen.io/artf/full/qpWBRW/)
## Summary
* Plugin name: `grapesjs-blocks-flexbox`
* Blocks
* `flexbox`
## Options
|Option|Description|Default|
|-|-|-
|`stylePrefix`|Classes prefix|`''`|
|`flexboxBlock`|Use this to extend the default flexbox block|`{}`|
|`labelRow`|Row label|`Row`|
|`labelColumn`|Column label|`Column`|
## Download
* CDN
* `https://unpkg.com/grapesjs-blocks-flexbox`
* NPM
* `npm i grapesjs-blocks-flexbox`
* GIT
* `git clone https://github.com/GrapesJS/blocks-flexbox.git`
## Usage
```html
var editor = grapesjs.init({
container : '#gjs',
...
plugins: ['grapesjs-blocks-flexbox'],
pluginsOpts: {
'grapesjs-blocks-flexbox': {
// options
}
}
});
```
## Development
Clone the repository
```sh
$ git clone https://github.com/GrapesJS/blocks-flexbox.git
$ cd blocks-flexbox
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
## License
BSD 3-Clause