{"id":18484988,"url":"https://github.com/alexanderjeurissen/flex","last_synced_at":"2025-07-08T06:07:08.679Z","repository":{"id":36986211,"uuid":"272267221","full_name":"alexanderjeurissen/Flex","owner":"alexanderjeurissen","description":"A declarative React primitive Flex component that exposes flexbox specification in JSX","archived":false,"fork":false,"pushed_at":"2023-07-11T03:21:28.000Z","size":638,"stargazers_count":4,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-17T20:44:08.028Z","etag":null,"topics":["component","css","css-flex","css-flexbox","css-flexbox-layout","flex-component","flexbox-specification","jsx","primitive","react","styled-components","styled-system"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/alexanderjeurissen.png","metadata":{"funding":{"github":"alexanderjeurissen"},"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":"2020-06-14T19:12:15.000Z","updated_at":"2023-12-29T17:00:47.000Z","dependencies_parsed_at":"2024-11-06T12:49:22.995Z","dependency_job_id":"1ce9fb4f-2bab-44dd-9675-20f64360481c","html_url":"https://github.com/alexanderjeurissen/Flex","commit_stats":{"total_commits":73,"total_committers":2,"mean_commits":36.5,"dds":0.410958904109589,"last_synced_commit":"de1c1676b62cf962e912e994721f4485d64a119c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/alexanderjeurissen/Flex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderjeurissen%2FFlex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderjeurissen%2FFlex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderjeurissen%2FFlex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderjeurissen%2FFlex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexanderjeurissen","download_url":"https://codeload.github.com/alexanderjeurissen/Flex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderjeurissen%2FFlex/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264207154,"owners_count":23572740,"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":["component","css","css-flex","css-flexbox","css-flexbox-layout","flex-component","flexbox-specification","jsx","primitive","react","styled-components","styled-system"],"created_at":"2024-11-06T12:43:51.515Z","updated_at":"2025-07-08T06:07:08.650Z","avatar_url":"https://github.com/alexanderjeurissen.png","language":"TypeScript","funding_links":["https://github.com/sponsors/alexanderjeurissen"],"categories":[],"sub_categories":[],"readme":"![image](public/assets/logo.png)\n\n\u003e Be infinitely flexible and constantly amazed. - Jason Kravitz\n\nA declarative React primitive Flex component that exposes the flexbox specification in JSX\n\nBased on Styled System and Styled Components. Written in typescript to provide strict prop validation on css spec adherence.\n\n## Usage\n\nImport as follows:\n\n`import Flex from 'react-flex-primitive';`\n\nThen use the Flex component to define the desired flexbox layout:\n\ne.g. for a Flex container that has vertically aligned flex-items, where the first flex item grows:\n\n```\n\u003cFlex alignItems='center'\u003e\n \u003cFlex flexGrow={1}\u003e\n   This flex item grows!\n \u003c/Flex\u003e\n \u003cFlex\u003e\n  This flex item does not grow :(\n \u003c/Flex\u003e\n\u003c/Flex\u003e\n```\n\n## Additional resources\n\n- https://www.w3.org/TR/css-flexbox-1/\n- https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderjeurissen%2Fflex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexanderjeurissen%2Fflex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderjeurissen%2Fflex/lists"}