{"id":17349226,"url":"https://github.com/co2-git/reacted-flex","last_synced_at":"2025-03-27T11:44:25.685Z","repository":{"id":68259445,"uuid":"49811369","full_name":"co2-git/reacted-flex","owner":"co2-git","description":"React components to use with CSS3 Flexbox","archived":false,"fork":false,"pushed_at":"2016-02-16T01:51:09.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T16:23:15.825Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/co2-git.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-17T09:46:00.000Z","updated_at":"2016-01-17T09:46:57.000Z","dependencies_parsed_at":"2023-05-02T16:26:34.320Z","dependency_job_id":null,"html_url":"https://github.com/co2-git/reacted-flex","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freacted-flex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freacted-flex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freacted-flex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co2-git%2Freacted-flex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/co2-git","download_url":"https://codeload.github.com/co2-git/reacted-flex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245841689,"owners_count":20681184,"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":[],"created_at":"2024-10-15T16:55:06.205Z","updated_at":"2025-03-27T11:44:25.666Z","avatar_url":"https://github.com/co2-git.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"reacted-flex\n===\n\nReact components to use with CSS3 Flexbox\n\n[More on Flex](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)\n\n# Usage\n\n```js\nimport React from 'react';\nimport Flex from 'reacted-flex';\n\nclass Layout extends React.Component {\n  render () {\n    return (\n      \u003cFlex wrap justify-content=\"space-between\"\u003e\n        \u003cimg flex-grow=\"5\" /\u003e\n        \u003cimg flex-shrink=\"0\" flex-basis=\"300px\" /\u003e\n        \u003cimg flex-align=\"end\" /\u003e\n      \u003c/Flex\u003e\n    );\n  }\n}\n```\n\n# Container\n\n## display\n\n### { display : flex }\n\n```html\n\u003cFlex /\u003e\n```\n\n### { display : inline-flex }\n\n```html\n\u003cFlex inline /\u003e\n```\n\n## flex-direction\n\n### { flex-direction : column }\n\n```html\n\u003cFlex column /\u003e\n\u003cFlex stack /\u003e\n```\n\n### { flex-direction : reverse }\n\n```html\n\u003cFlex reverse /\u003e\n```\n\n### { flex-direction : column-reverse }\n\n```html\n\u003cFlex column reverse /\u003e\n```\n\n## flex-wrap\n\n### { flex-wrap : no-wrap }\n\n```html\n\u003cFlex wrap={false} /\u003e\n```\n\n### { flex-wrap : wrap }\n\n```html\n\u003cFlex wrap /\u003e\n\u003cFlex wrap={true} /\u003e\n```\n\n### { flex-wrap : wrap-reverse }\n\n```html\n\u003cFlex wrap=\"reverse\" /\u003e\n\u003cFlex wrap-reverse /\u003e\n```\n\n## justify-content\n\n### { justify-content : flex-start }\n\n```html\n\u003cFlex justify-content=\"flex-start\" /\u003e\n```\n\n### { justify-content : flex-end }\n\n```html\n\u003cFlex justify-content=\"flex-end\" /\u003e\n```\n\n### { justify-content : center }\n\n```html\n\u003cFlex justify-content=\"center\" /\u003e\n```\n\n### { justify-content : space-between }\n\n```html\n\u003cFlex justify-content=\"space-between\" /\u003e\n```\n\n### { justify-content : space-around }\n\n```html\n\u003cFlex justify-content=\"space-around\" /\u003e\n```\n\n## align-items\n\n### { align-items : stretch }\n\n```html\n\u003cFlex align-items=\"stretch\" /\u003e\n```\n\n### { align-items : flex-start }\n\n```html\n\u003cFlex align-items=\"flex-start\" /\u003e\n```\n\n### { align-items : flex-end }\n\n```html\n\u003cFlex align-items=\"flex-end\" /\u003e\n```\n\n### { align-items : center }\n\n```html\n\u003cFlex align-items=\"center\" /\u003e\n```\n\n### { align-items : baseline }\n\n```html\n\u003cFlex align-items=\"baseline\" /\u003e\n```\n\n## align-content\n\n### { align-content : stretch }\n\n```html\n\u003cFlex align-content=\"stretch\" /\u003e\n```\n\n### { align-content : flex-start }\n\n```html\n\u003cFlex align-content=\"flex-start\" /\u003e\n```\n\n### { align-content : flex-end }\n\n```html\n\u003cFlex align-content=\"flex-end\" /\u003e\n```\n\n### { align-content : center }\n\n```html\n\u003cFlex align-content=\"center\" /\u003e\n```\n\n### { align-content : space-between }\n\n```html\n\u003cFlex align-content=\"space-between\" /\u003e\n```\n\n### { align-content : space-around }\n\n```html\n\u003cFlex align-content=\"space-around\" /\u003e\n```\n\n## Item\n\n### { order : \u003cinteger\u003e }\n\n```html\n\u003cdiv flex-order={Number} /\u003e\n```\n\n### { flex-grow : \u003cinteger\u003e }\n\n```html\n\u003cdiv flex-grow={Number} /\u003e\n```\n\n### { flex-shrink : \u003cinteger\u003e }\n\n```html\n\u003cdiv flex-shrink={Number} /\u003e\n```\n\n### { flex-basis : \u003cwidth\u003e }\n\n```html\n\u003cdiv flex-basis={String} /\u003e\n```\n\n### { align-self : \u003cauto | flex-start | flex-end | center | baseline | stretch\u003e }\n\n```html\n\u003cdiv flex-align={String} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fco2-git%2Freacted-flex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fco2-git%2Freacted-flex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fco2-git%2Freacted-flex/lists"}