{"id":13437332,"url":"https://github.com/nachoaIvarez/flexbox-react","last_synced_at":"2025-03-19T06:31:00.129Z","repository":{"id":57116436,"uuid":"55577678","full_name":"nachoaIvarez/flexbox-react","owner":"nachoaIvarez","description":"Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.","archived":true,"fork":false,"pushed_at":"2020-10-16T18:29:12.000Z","size":1828,"stargazers_count":319,"open_issues_count":18,"forks_count":40,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-01T10:03:07.131Z","etag":null,"topics":["flexbox","layout","react","spec-compliant"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nachoaIvarez.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":"2016-04-06T05:16:22.000Z","updated_at":"2024-06-21T20:25:32.000Z","dependencies_parsed_at":"2022-08-22T22:20:14.913Z","dependency_job_id":null,"html_url":"https://github.com/nachoaIvarez/flexbox-react","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachoaIvarez%2Fflexbox-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachoaIvarez%2Fflexbox-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachoaIvarez%2Fflexbox-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachoaIvarez%2Fflexbox-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nachoaIvarez","download_url":"https://codeload.github.com/nachoaIvarez/flexbox-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244370951,"owners_count":20442319,"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":["flexbox","layout","react","spec-compliant"],"created_at":"2024-07-31T03:00:56.056Z","updated_at":"2025-03-19T06:30:58.081Z","avatar_url":"https://github.com/nachoaIvarez.png","language":"JavaScript","readme":"## This project sunsetting\nI created this a relatively long time ago, gave it visibility on the internet and used it in multiple projects, in production, like many of you. Time passed and I can no longer devote time to `flexbox-react`, so I'm not longer maintaining this repo.\n\nI'm glad for the appearances of other libraries iterating in this concept I created (and I take pride on this) —From [material-ui](https://material-ui.com/system/flexbox/) to [chakra-ui](https://chakra-ui.com/box) and even [google's native android flexbox layout library](https://github.com/google/flexbox-layout).\n\nThanks to all contributors along the way!\n\n# flexbox-react\n\u003cp\u003e\n  \u003ca href=\"https://travis-ci.org/nachoaIvarez/flexbox-react\"\u003e\n    \u003cimg src=\"https://travis-ci.org/nachoaIvarez/flexbox-react.svg?branch=master\"\n         alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://npmjs.org/package/flexbox-react\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/flexbox-react.svg\"\n         alt=\"NPM Version\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://npmjs.org/package/flexbox-react\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/dm/flexbox-react.svg\"\n         alt=\"Downloads\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://david-dm.org/nachoaIvarez/flexbox-react.svg\"\u003e\n    \u003cimg src=\"https://david-dm.org/nachoaIvarez/flexbox-react.svg\"\n         alt=\"Dependency Status\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/nachoaIvarez/flexbox-react/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/flexbox-react.svg\"\n         alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Intro\nUnopinionated, standard compliant flexbox components.\n\n## Why\nYou should not learn any proprietary syntax, classnames or API's for this.\nIf you know how to use flexbox, you know how to use `flexbox-react` components.\n\nNo more `\u003cContainer\u003e`, `\u003cSpacedBox\u003e`, `\u003cColumn\u003e`, `\u003cView\u003e`, `\u003cSection\u003e` or any other\narbitrarily named and _spec_\u0026hairsp;ed components to layout your apps.\n\nNo more `first={true}`, `ternary={true}`, `spaced={true}`,`grouped={true}`\nor any other arbitrarily named and _spec_\u0026hairsp;ed props to layout your apps.\n\n`flexbox-react` is agnostic of which post/pre css build flow you have, it works out of the box. It's agnostic to it. You could have all your styling on css files. Or all inlined. This sits just in the middle. It might be a good idea to see your components and know how they are laid out without jumping between css files or arbitrary, layout-exclusive components specifications.\n\n## How\nNo hardcoded, bloated, unnecessary vendor prefixes, by\n\u003ca href=\"http://caniuse.com\"\u003e caniuse\u003c/a\u003e. Just those your browser needs, based\non your `userAgent`.\n\nNo need to import any new stylesheet or to add any styles to your\nexisting stylesheets. It works out of the box, just by using the\ncomponent.\n\n## Install\n\n```sh\nyarn add flexbox-react\n# or\nnpm install --save flexbox-react\n```\n\n## Usage\n```js\nimport Flexbox from 'flexbox-react';\n\n// ...\n\u003cFlexbox flexDirection=\"column\" minHeight=\"100vh\"\u003e\n  \u003cFlexbox element=\"header\" height=\"60px\"\u003e\n    Header\n  \u003c/Flexbox\u003e\n\n  \u003cFlexbox flexGrow={1}\u003e\n    Content\n  \u003c/Flexbox\u003e\n\n  \u003cFlexbox element=\"footer\" height=\"60px\"\u003e\n    Footer\n  \u003c/Flexbox\u003e\n\u003c/Flexbox\u003e\n```\n*Sticky footer!*\n\nAs you can see, there're some extra props as _layout_\u0026hairsp;ing helpers. Those are `height`, `minHeight`, `maxHeight`, `width`, `minWidth`, `maxWidth`, `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `margin`, `marginTop`, `marginRight`, `marginBottom`, and `marginLeft`. The idea of `flexbox-react` is to be a complete solution to build layouts. Since, well, flexbox is a complete solution to build layouts. It's all about the sugar. Feel free to create an issue or submit a PR if you think there's room for improvement here!\n\n### Semantic HTML tags\n\nIf you need to use a tag other than `\u003cdiv\u003e` for the layout, like `\u003cheader\u003e` or `\u003csection\u003e`, you can pass an extra `element` prop to the `\u003cFlexbox /\u003e` component:\n\n```html\n\u003cFlexbox element=\"header\" height=\"80px\"\u003e\n  ...\n\u003c/Flexbox\u003e\n```\n\nwhich will render to this:\n\n```html\n\u003cheader style=\"display: flex; height: 80px;\"\u003e\n  ...\n\u003c/header\u003e\n```\n\n## Props\nTake a look at\n[Flexbox PropTypes](https://github.com/nachoaIvarez/flexbox-react/blob/master/src/Flexbox.jsx#L68-L141). No mysteries. As said, you just need to know actual flexbox properties not any proprietary syntax for them. If you're not familiar with flexbox, [this is a good starting point](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).\n\nIf TypeScript is your cup of tea, check the [type definitions](https://github.com/nachoaIvarez/flexbox-react/blob/master/src/index.d.ts), we support them too.\n\n## License\n\nMIT © [Ignacio Álvarez](http://github.com/nachoaIvarez)\n\n[npm-url]: https://npmjs.org/package/flexbox-react\n[npm-image]: https://img.shields.io/npm/v/flexbox-react.svg\n\n[depstat-url]: https://david-dm.org/nachoaIvarez/flexbox-react\n[depstat-image]: https://david-dm.org/nachoaIvarez/flexbox-react.svg\n\n[download-badge]: http://img.shields.io/npm/dm/flexbox-react.svg\n","funding_links":[],"categories":["Uncategorized","UI Components","UI Layout","Soluções","目录"],"sub_categories":["Uncategorized","Layout","Form Components","\u003ca id=\"ui\"\u003eui\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FnachoaIvarez%2Fflexbox-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FnachoaIvarez%2Fflexbox-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FnachoaIvarez%2Fflexbox-react/lists"}