{"id":13542738,"url":"https://github.com/Sleen/FlexLayout","last_synced_at":"2025-04-02T11:30:53.247Z","repository":{"id":65843153,"uuid":"104190674","full_name":"Sleen/FlexLayout","owner":"Sleen","description":"an implementation of Flexbox(Flexible Box) layout algorithm","archived":false,"fork":false,"pushed_at":"2018-01-02T06:35:53.000Z","size":59,"stargazers_count":98,"open_issues_count":1,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-03T09:32:41.640Z","etag":null,"topics":["css-flexbox","flex-layout","flexbox","layout"],"latest_commit_sha":null,"homepage":null,"language":"C","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/Sleen.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}},"created_at":"2017-09-20T08:53:00.000Z","updated_at":"2024-10-29T01:38:47.000Z","dependencies_parsed_at":"2023-02-13T15:35:18.807Z","dependency_job_id":null,"html_url":"https://github.com/Sleen/FlexLayout","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/Sleen%2FFlexLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sleen%2FFlexLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sleen%2FFlexLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sleen%2FFlexLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sleen","download_url":"https://codeload.github.com/Sleen/FlexLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246806480,"owners_count":20837108,"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":["css-flexbox","flex-layout","flexbox","layout"],"created_at":"2024-08-01T11:00:16.628Z","updated_at":"2025-04-02T11:30:52.961Z","avatar_url":"https://github.com/Sleen.png","language":"C","readme":"# FlexLayout\n\n[中文介绍](#中文介绍)\n\n`FlexLayout` is an `C` implementation of `Flexible Box` layout. It follows the standard [algorithm](https://www.w3.org/TR/css-flexbox-1/#layout-algorithm) and supports almost all features.\n\n`FlexLayout` is battle tested. Please feel free to use.\n\n### Usage\n\n#### C/C++\n```C\n    FlexNodeRef root = Flex_newNode();\n    \n    FlexNodeRef child1 = Flex_newNode();\n    Flex_setWidth(child1, 50);\n    Flex_setHeight(child1, 50);\n    Flex_addChild(root, child1);\n\n    FlexNodeRef child2 = Flex_newNode();\n    Flex_setWidth(child2, 50);\n    Flex_setHeight(child2, 50);\n    Flex_addChild(root, child2);\n\n    Flex_layout(root, FlexUndefined, FlexUndefined, 1);\n    Flex_print(root, FlexPrintDefault);\n\n    Flex_freeNodeRecursive(root);\n```\n\n#### Javascript\n\n`FlexLayout` has ported to javascript by using [`nbind`](https://github.com/charto/nbind).\n\n```js\n    var root = new flex.Node();\n    root.direction = flex.Vertical;\n\n    var child1 = new flex.Node();\n    child1.width = new flex.Length(50);\n    child1.height = new flex.Length(50);\n    root.add(child1);\n\n    var child2 = new flex.Node();\n    child2.setMeasure(function(size){return new flex.Size(10, 10);});\n    root.add(child2);\n\n    root.layout(NaN, NaN);\n    root.print();\n```\n\n### Features\n\n- margin/padding\n- min/max size\n- flex-direction\n- wrap\n- align-items\n- align-self\n- align-content\n- justify-content\n- flex-basis\n- flex-grow\n- flex-shrink\n- percentage\n\n### Additions\n\n`FlexLayout` added some useful properties:\n\n- `spacing / line-spacing` spacing between items/lines\n- `fixed` do not participate the flex layout，like `position: absolute`\n- `lines` maximum number of lines\n- `items-per-line` maximum number of items in each line\n\n### Known Issues\n\n- `min-width`/`min-height` do not support [`auto`](https://www.w3.org/TR/css-flexbox-1/#min-size-auto)\n- `order` is not supported\n\n### License\n\nLicensed under the MIT License.\n\n---\n\n## 中文介绍\n\n`FlexLayout` 是 `Flexible Box` 布局算法的 `C` 语言实现。按照标准[算法](https://www.w3.org/TR/css-flexbox-1/#layout-algorithm)实现，几乎支持所有特性。\n\n`FlexLayout` 经过充分测试，请放心食用。\n\n### 使用\n\n#### C/C++\n```C\n    FlexNodeRef root = Flex_newNode();\n    \n    FlexNodeRef child1 = Flex_newNode();\n    Flex_setWidth(child1, 50);\n    Flex_setHeight(child1, 50);\n    Flex_addChild(root, child1);\n\n    FlexNodeRef child2 = Flex_newNode();\n    Flex_setWidth(child2, 50);\n    Flex_setHeight(child2, 50);\n    Flex_addChild(root, child2);\n\n    Flex_layout(root, FlexUndefined, FlexUndefined, 1);\n    Flex_print(root, FlexPrintDefault);\n\n    Flex_freeNodeRecursive(root);\n```\n\n#### Javascript\n\n`FlexLayout` 使用 [`nbind`](https://github.com/charto/nbind) 移植了 javascript 版本。\n\n```js\n    var root = new flex.Node();\n    root.direction = flex.Vertical;\n\n    var child1 = new flex.Node();\n    child1.width = new flex.Length(50);\n    child1.height = new flex.Length(50);\n    root.add(child1);\n\n    var child2 = new flex.Node();\n    child2.setMeasure(function(size){return new flex.Size(10, 10);});\n    root.add(child2);\n\n    root.layout(NaN, NaN);\n    root.print();\n```\n\n### 支持的特性\n\n- margin/padding\n- min/max size\n- flex-direction\n- wrap\n- align-items\n- align-self\n- align-content\n- justify-content\n- flex-basis\n- flex-grow\n- flex-shrink\n- 百分比\n\n### 扩展属性\n\n`FlexLayout` 增加了以下扩展属性：\n\n- `spacing / line-spacing` 为每两个元素/行之间增加间距\n- `fixed` 元素不参与 flex 布局，类似于 `position: absolute`\n- `lines` 最大行数\n- `items-per-line` 每行最大元素个数\n\n### 已知问题\n\n- `min-width`/`min-height` 不支持设置为 [`auto`](https://www.w3.org/TR/css-flexbox-1/#min-size-auto)\n- 不支持 `order` 属性\n\n### 协议\n\n遵循 MIT 协议。\n","funding_links":[],"categories":["C"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSleen%2FFlexLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSleen%2FFlexLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSleen%2FFlexLayout/lists"}