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

$3

* 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,

$3

* 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