Repository files navigation

FlexLayout for SpriteJS

npm install sprite-flex-layout

import{Node}from'sprite-flex-layout';constcontainer=Node.create({width:500,height:500,flexDirection:'row'});constnode1=Node.create({width:100,height:100})constnode2=Node.create({width:100,height:100});container.appendChild(node1);container.appendChild(node2);container.calculateLayout();constlayout=container.getAllComputedLayout();console.log(layout);

• flexDirection, supportrow |row-reverse |column |column-reverse, default isrow
• flexWrap , supportnowrap |wrap |wrap-reverse, default isnowrap
• flexFlow,<‘flex-direction’> || <‘flex-wrap’>
• alignItems, supportstretch |flex-start |flex-end |center, default isstretch, not supportbaseline
• alignContent, supportstretch |flex-start |flex-end |center |space-between |space-around |space-evenly, default isstretch
• justifyContent , supportflex-start |flex-end |center |space-between |space-around |space-evenly, default isflex-start
• height, container height,<length>
• width, container width,<length>

• flex ,[ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
• alignSelf, supportauto |stretch |flex-start |flex-end |center, default isauto. not supportbaseline
• 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, supportcontent-box |border-box, default iscontent-box
• offsetWidth, set offset width of flex item
• offsetHeight , set offset height of flex item
• order, set flex items order