{"id":19014241,"url":"https://github.com/spritejs/sprite-flex-layout","last_synced_at":"2025-04-23T00:42:50.185Z","repository":{"id":87731658,"uuid":"149217202","full_name":"spritejs/sprite-flex-layout","owner":"spritejs","description":"grid-layout is a layout engine which implements flex, can use in canvas/node-canvas","archived":false,"fork":false,"pushed_at":"2020-06-12T08:56:06.000Z","size":330,"stargazers_count":45,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T00:42:44.732Z","etag":null,"topics":["flex","flexbox","flexlayout","spritejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spritejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-18T02:29:42.000Z","updated_at":"2024-07-05T03:30:19.000Z","dependencies_parsed_at":"2023-04-11T04:34:43.360Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/sprite-flex-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-flex-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-flex-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-flex-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-flex-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/sprite-flex-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348891,"owners_count":21415907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flex","flexbox","flexlayout","spritejs"],"created_at":"2024-11-08T19:28:27.957Z","updated_at":"2025-04-23T00:42:50.179Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sprite-flex-layout\nFlexLayout for SpriteJS\n\n## Install\n\n```\nnpm install sprite-flex-layout\n```\n\n## How to use\n\n```js\nimport {Node} from 'sprite-flex-layout';\nconst container = Node.create({\n  width: 500,\n  height: 500,\n  flexDirection: 'row'\n});\nconst node1 = Node.create({\n  width: 100,\n  height: 100\n})\nconst node2 = Node.create({\n  width: 100,\n  height: 100\n});\n\ncontainer.appendChild(node1);\ncontainer.appendChild(node2);\n\ncontainer.calculateLayout();\nconst layout = container.getAllComputedLayout();\nconsole.log(layout);\n```\n\n## support properties\n\n### flex container\n\n* `flexDirection`, support `row` | `row-reverse` | `column` | `column-reverse`, default is `row`\n* `flexWrap` , support `nowrap` | `wrap` | `wrap-reverse`, default is `nowrap`\n* `flexFlow`, \t`\u003c‘flex-direction’\u003e || \u003c‘flex-wrap’\u003e`\n* `alignItems`, support  `stretch` | `flex-start` | `flex-end` | `center`, default is `stretch`, not support `baseline`\n* `alignContent`, support `stretch` | `flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `space-evenly`, default is `stretch`\n* `justifyContent` , support `flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `space-evenly`, default is `flex-start`\n* `height`,  container height, `\u003clength\u003e`\n* `width`, container width, `\u003clength\u003e`\n\n### flex items\n\n* `flex` , `[ \u003c‘flex-grow’\u003e \u003c‘flex-shrink’\u003e? || \u003c‘flex-basis’\u003e ]`\n* `alignSelf`, support `auto` | `stretch` | `flex-start` | `flex-end` | `center`, default is `auto`. not support `baseline`\n* `flexShrink` , `\u003cNumber\u003e`\n* `flexBasis` , `\u003cNumber\u003e`\n* `flexGrow` , `\u003cNumber\u003e`\n* `maxHeight` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `maxWidth` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `minHeight` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `minWidth` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `border`, support `[borderTop, borderRight, borderBottom, borderLeft]`\n* `borderTop` , support `\u003clength\u003e`\n* `borderRight` , support `\u003clength\u003e`\n* `borderBottom` , support `\u003clength\u003e`\n* `borderLeft` , support `\u003clength\u003e`\n* `height` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `width` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `margin` , support `[marginTop, marginRight, marginBottom, marginLeft]`\n* `marginTop` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `marginRight` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `marginBottom` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `marginLeft` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `padding`, support `[paddingTop, paddingRight, paddingBottom, paddingLeft]`\n* `paddingTop` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `paddingRight` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `paddingBottom` , support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `paddingLeft`, support `\u003clength\u003e` | `\u003cpercentage\u003e`\n* `boxSizing`, support `content-box` | `border-box`, default is `content-box`\n* `offsetWidth`, set offset width of flex item\n* `offsetHeight` , set offset height of flex item\n* `order`, set flex items order","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-flex-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fsprite-flex-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-flex-layout/lists"}