{"id":49583275,"url":"https://github.com/plotdb/flexize","last_synced_at":"2026-05-03T21:07:26.374Z","repository":{"id":316728284,"uuid":"1064595084","full_name":"plotdb/flexize","owner":"plotdb","description":null,"archived":false,"fork":false,"pushed_at":"2025-11-05T17:30:17.000Z","size":558,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-05T18:25:28.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/plotdb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-26T09:10:15.000Z","updated_at":"2025-11-05T17:30:05.000Z","dependencies_parsed_at":"2025-10-01T05:47:08.826Z","dependency_job_id":null,"html_url":"https://github.com/plotdb/flexize","commit_stats":null,"previous_names":["plotdb/flexize"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/plotdb/flexize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fflexize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fflexize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fflexize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fflexize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plotdb","download_url":"https://codeload.github.com/plotdb/flexize/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fflexize/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32584741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-05-03T21:07:23.450Z","updated_at":"2026-05-03T21:07:26.365Z","avatar_url":"https://github.com/plotdb.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flexize\n\nflex-grow-based panel resizing tool for flexbox.\n\n\n## Usage\n\ninstall with npm:\n\n    npm install --save flexize\n\n\nand include the main script ( from local or cdn if available ):\n\n    \u003cscript src=\"index.min.js\"\u003e\u003c/script\u003e\n\n\ncreate a flexize object with the flexbox you'd like to resize:\n\n    fx = new flexize({root: 'selector or the node instance'})\n\n\nConstructor options:\n\n - `root`: container element or selector of it. should be a flexbox.\n - `gutter-selector`: optional. default `.flexize-gutter`.\n   - selector of nodes that works as bar to be dragged.\n - `fixed-selector`: optional. defaut `.flexize-fixed`.\n   - selector of panes that flexize should not resize.\n\n\n## DOM Construct\n\nflexize is used to support resizing of your panes inside a flexbox. To resize, you need something to drag called `gutter`. Simply add any number of gutters between panes you'd like to resize:\n\n    div(style=\"display:flex;align-items:stretch\")\n      div Adjustable by A\n      .flexize-gutter(style=\"width:5px;background:#000\") A\n      div Adjustable by A\n      .flexize-fixed Fixed Size\n      div Adjustable by B\n      .flexize-gutter(style=\"width:5px;background:#000\") B\n      div Adjustable by B\n\nflexize uses `flex-grow` to resize panes so you should:\n\n1. consider `flex-basis` as the minimal width of a panel\n2. optional provide initial `flex-grow` as a hint of how the free space should be distribute.\n  - flexize will give all free space to the very first non-fixed element if no hint is given.\n3. keep `flex-shrink` as 0\n\nHere is another example with flex provided:\n\n    div(style=\"display:flex;align-items:stretch\")\n      div(style=\"flex:1 0 100px\")\n      .gutter(style=\"width:5px;background:#000\")\n      div(style=\"flex:0 0 100px\")\n\nFixed nodes and Hidden nodes (with `display` set to `none`) will be ignored and all gutters will automatically look up for the next visible panes to resize.\n\n\n## Gutters Inside a Cell\n\nYou can place gutters inside a cell element:\n\n    .container\n      .cell\n        .gutter\n      .cell\n        .gutter\n        span content\n        .gutter\n      .cell\n        .gutter\n\nflexize determines inner gutters based on their position within a cell:\n\n - first child: works as gutter before its host cell\n - last child: works as gutter after its host cell\n - only child: works as gutter for both side around its host cell\n\nNote that based on the selector you used, a gutter may affect grandparent nodes. use explicit selector to only select a desired child as gutter if necessary. See `web/src/pug/nested` for a live example.\n\n\n## APIs \n\n - `set(list = [])`: manual set flex-grow from values in `list` array.\n - `build()`: prepare required DOM and initialize them\n - `estimate()`: recalculate spaces available for flex to resizing\n - `reset()`: reset space distribution to initial state. Include `build()` and `estimate()` combo\n - `dir(opt)`: return current direction ( `row` or `column` ) as a string.\n   - it returns cached value, so please use `reset` if you need the latest value.\n   - `opt`: optional object with following parameter:\n     - `reset`: optional. default false. when true, get and cache a new value from latest computed result.\n - `reverse(opt)`: return true if current flex direction is reversed.\n   - `opt`: see `dir(opt)`.\n   - like `dir(opt)`, this is also cached.\n - `attr(opt)`: return attribute name of the direction to grow, either `width` or `height`.\n   - `opt`: see `dir(opt)`.\n   - like `dir(opt)`, this is also cached.\n - `fire(n, v)`: fire an event named `n` with value `v`.\n - `on(n, cb)`: listen to event `n` and handle by callback function `cb`.\n   - `n` can be either a string or an array.\n\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotdb%2Fflexize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplotdb%2Fflexize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotdb%2Fflexize/lists"}