https://github.com/spritejs/sprite-flex-layout
grid-layout is a layout engine which implements flex, can use in canvas/node-canvas
https://github.com/spritejs/sprite-flex-layout
flex flexbox flexlayout spritejs
Last synced: 9 months ago
JSON representation
grid-layout is a layout engine which implements flex, can use in canvas/node-canvas
- Host: GitHub
- URL: https://github.com/spritejs/sprite-flex-layout
- Owner: spritejs
- License: mit
- Created: 2018-09-18T02:29:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-12T08:56:06.000Z (over 5 years ago)
- Last Synced: 2025-04-23T00:42:44.732Z (9 months ago)
- Topics: flex, flexbox, flexlayout, spritejs
- Language: JavaScript
- Homepage:
- Size: 322 KB
- Stars: 45
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sprite-flex-layout
FlexLayout for SpriteJS
## Install
```
npm install sprite-flex-layout
```
## How to use
```js
import {Node} from 'sprite-flex-layout';
const container = Node.create({
width: 500,
height: 500,
flexDirection: 'row'
});
const node1 = Node.create({
width: 100,
height: 100
})
const node2 = Node.create({
width: 100,
height: 100
});
container.appendChild(node1);
container.appendChild(node2);
container.calculateLayout();
const layout = container.getAllComputedLayout();
console.log(layout);
```
## support properties
### flex container
* `flexDirection`, support `row` | `row-reverse` | `column` | `column-reverse`, default is `row`
* `flexWrap` , support `nowrap` | `wrap` | `wrap-reverse`, default is `nowrap`
* `flexFlow`, `<‘flex-direction’> || <‘flex-wrap’>`
* `alignItems`, support `stretch` | `flex-start` | `flex-end` | `center`, default is `stretch`, not support `baseline`
* `alignContent`, support `stretch` | `flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `space-evenly`, default is `stretch`
* `justifyContent` , support `flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `space-evenly`, default is `flex-start`
* `height`, container height, ``
* `width`, container width, ``
### flex items
* `flex` , `[ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]`
* `alignSelf`, support `auto` | `stretch` | `flex-start` | `flex-end` | `center`, default is `auto`. not support `baseline`
* `flexShrink` , ``
* `flexBasis` , ``
* `flexGrow` , ``
* `maxHeight` , support `` | ``
* `maxWidth` , support `` | ``
* `minHeight` , support `` | ``
* `minWidth` , support `` | ``
* `border`, support `[borderTop, borderRight, borderBottom, borderLeft]`
* `borderTop` , support ``
* `borderRight` , support ``
* `borderBottom` , support ``
* `borderLeft` , support ``
* `height` , support `` | ``
* `width` , support `` | ``
* `margin` , support `[marginTop, marginRight, marginBottom, marginLeft]`
* `marginTop` , support `` | ``
* `marginRight` , support `` | ``
* `marginBottom` , support `` | ``
* `marginLeft` , support `` | ``
* `padding`, support `[paddingTop, paddingRight, paddingBottom, paddingLeft]`
* `paddingTop` , support `` | ``
* `paddingRight` , support `` | ``
* `paddingBottom` , support `` | ``
* `paddingLeft`, support `` | ``
* `boxSizing`, support `content-box` | `border-box`, default is `content-box`
* `offsetWidth`, set offset width of flex item
* `offsetHeight` , set offset height of flex item
* `order`, set flex items order