Skip to content

Latest commit

 

History

History
80 lines (69 loc) · 2.85 KB

README.md

File metadata and controls

80 lines (69 loc) · 2.85 KB
Raw

sprite-flex-layout

FlexLayout for SpriteJS

Install

npm install sprite-flex-layout

How to use

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, <length>
  • width, container width, <length>

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 , <Number>
  • flexBasis , <Number>
  • flexGrow , <Number>
  • maxHeight , support <length> | <percentage>
  • maxWidth , support <length> | <percentage>
  • minHeight , support <length> | <percentage>
  • minWidth , support <length> | <percentage>
  • border, support [borderTop, borderRight, borderBottom, borderLeft]
  • borderTop , support <length>
  • borderRight , support <length>
  • borderBottom , support <length>
  • borderLeft , support <length>
  • height , support <length> | <percentage>
  • width , support <length> | <percentage>
  • margin , support [marginTop, marginRight, marginBottom, marginLeft]
  • marginTop , support <length> | <percentage>
  • marginRight , support <length> | <percentage>
  • marginBottom , support <length> | <percentage>
  • marginLeft , support <length> | <percentage>
  • padding, support [paddingTop, paddingRight, paddingBottom, paddingLeft]
  • paddingTop , support <length> | <percentage>
  • paddingRight , support <length> | <percentage>
  • paddingBottom , support <length> | <percentage>
  • paddingLeft, support <length> | <percentage>
  • 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