{"id":17203863,"url":"https://github.com/jbetancur/react-flexybox","last_synced_at":"2025-08-18T16:08:53.309Z","repository":{"id":24566504,"uuid":"101930322","full_name":"jbetancur/react-flexybox","owner":"jbetancur","description":"Flexbox in React made simple","archived":false,"fork":false,"pushed_at":"2023-02-22T12:53:09.000Z","size":2270,"stargazers_count":9,"open_issues_count":41,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-06T10:44:37.766Z","etag":null,"topics":["css","demo","flex-box","flex-items","flexbox","react","react-flexbox"],"latest_commit_sha":null,"homepage":"https://react-flexybox-demo.netlify.com/","language":"JavaScript","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/jbetancur.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-08-30T21:26:00.000Z","updated_at":"2025-07-16T13:00:21.000Z","dependencies_parsed_at":"2024-02-04T21:08:13.325Z","dependency_job_id":"f858c38e-58dc-4b8e-aa86-5268e2cc6ebe","html_url":"https://github.com/jbetancur/react-flexybox","commit_stats":{"total_commits":62,"total_committers":3,"mean_commits":"20.666666666666668","dds":0.09677419354838712,"last_synced_commit":"b21cb714bfdea7df5bd5f6f684f5735caae6060d"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/jbetancur/react-flexybox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbetancur%2Freact-flexybox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbetancur%2Freact-flexybox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbetancur%2Freact-flexybox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbetancur%2Freact-flexybox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbetancur","download_url":"https://codeload.github.com/jbetancur/react-flexybox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbetancur%2Freact-flexybox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271019961,"owners_count":24685777,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["css","demo","flex-box","flex-items","flexbox","react","react-flexbox"],"created_at":"2024-10-15T02:19:32.973Z","updated_at":"2025-08-18T16:08:53.274Z","avatar_url":"https://github.com/jbetancur.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Flexy Box\n\nReact flexy box is a simple to use flexbox system for your React project based on the original [flexybox library](https://github.com/jbetancur/flexybox)\n\nIf you've used the bootstrap layout system, then react-flexybox should be relatively familiar.\n\n* Straight forward and familiar API for controlling your layout\n* built with [styled-components](https://github.com/styled-components/styled-components) - no css/scss means no need to add special loaders/config\n* based off actual uses cases in production apps\n\n## Live Demo\nhttps://react-flexybox-demo.netlify.com/\n\n## Browser Support\n```\n\"Chrome \u003e= 48\",\n\"Firefox \u003e= 44\",\n\"Firefox ESR\",\n\"Safari \u003e= 9.1\",\n\"Edge \u003e= 12\",\n\"ios_saf \u003e= 9.3\",\n\"ie 11\"\n```\n\n## Installation\n\ndependencies: react 15+, styled-components 3+\n\n```\nnpm install react-flexybox styled-components\n```\nor\n\n```\nyarn add react-flexy-box styled-components\n```\n\n## API\n### `\u003cContainer /\u003e`\nOptional wrapper\n\n| prop  \t  |   type  \t          | values \t| default \t| description                 \t                                                    |\n|---------- |:------------------:\t|--------\t|---------\t| --------------------------------------------------------------------------------- |\n| fluid \t  | boolean \t          |        \t| false    \t| true: sets content to 100% of page width \\| false: sets a max-width for content   |\n| className | string \t            |        \t|         \t| set the className on the Container Element                                        |\n| style \t  | object \t            |        \t|         \t| set the style on the Container Element                                            |\n| component | function \\| string \t|         | `div`     | The component to render the Container as                                          |\n\n### `\u003cRow\u003e`\nRow wraps Cols\n\n| prop           \t|   type  \t| values                                                                         \t    | default    \t| description |\n|----------------\t|:-------:\t|------------------------------------------------------------------------------------\t|------------\t| ----------- |\n| gutter         \t| number \t  |                                                                                \t    | 0          \t|\n| columnDivision  | integer   |                                                                                     | 12          | allows columns divisions to be overidden (i.e. 24 = smaller columns than 12)\n| minColWidths    | number \t  |                                                                                     |             | override the minWidth for all Cols within the Row\n| wrap           \t| string  \t| `nowrap \\| wrap \\| wrap-reverse`                                                \t  | wrap       \t| whether flex items should wrap when the window is resized\n| direction      \t| string  \t| `row \\| row-reverse \\| column \\| column-reverse`                                  \t| row        \t|\n| justifyContent \t| string  \t| `flex-start \\| flex-end \\| center \\| space-between \\| space-around \\| space-evenly` | flex-start \t| justityContent aligns the items inside a flex container along the x axis\n| alignContent   \t| string  \t| `flex-start \\| flex-end \\| center \\| baseline \\| stretch`                          \t| stretch    \t| alignContent aligns the whole structure according to its value and has no effect when items are in a single line\n| alignItems     \t| string  \t| `flex-start \\| flex-end \\| center \\| space-between \\| space-around \\| stretch \\| baseline`      | stretch    \t| alignItems aligns the items inside a flex container along the y axis just like justifyContent does along the x axis\n| className       | string \t  |        \t                                                                            |         \t  | set the className on the Row Element                                          |\n| style \t        | object \t  |        \t                                                                            |         \t  | set the style on the Row Element                                              |\n| debug           | boolean   |                                                                                     | false       | adds bounding boxes to help debug layout issues                               |\n| height          | string    |                                                                                     |             | allows setting the Row height e.g. `height=\"100px\"`                            |\n| component       | function \\| string \t|                                                                           | `div`       | The component to render the Row as                                            |\n| center          | boolean\t  |                                                                                     | false       | shortcut to center child `Col` items horizontally and vertically              |\n| fill            | boolean \t|                                                                                     | false       | shortcut that sets `Row` to `height: 100%` - *(overrides 'height')*                                  |\n| padding         | string \t  |                                                                                     | 0           | sets padding on `Row`                                                         |\n| paddingTop      | string \t  |                                                                                     | 0           | sets padding-top on `Row`                                                     |\n| paddingLeft     | string \t  |                                                                                     | 0           | sets padding-left on `Row`                                                    |\n| paddingBottom   | string \t  |                                                                                     | 0           | sets padding-bottom `Row`                                                     |\n| paddingRight    | string \t  |                                                                                     | 0           | sets padding-right on `Row`                                                   |\n\n* `\u003cRow gutter={4} minColWidth={100}\u003e` sets child `Col` flex items to margin of 4px and all min-widths to 100px within `Row`\n* `\u003cRow justifyContext=\"center\"\u003e` center justifies child `Col` flex items horizontally within the `Row`\n* `\u003cRow justifyContext=\"center\" alignItems=\"center\" \u003e` center justifies child `Col` flex items horizontally and vertically within the `Row`\n\n### `\u003cCol\u003e`\nFlex Items\n\n| prop  \t  |        type        \t| values \t                                                            | default \t            | description                 \t              |\n|---------- |:------------------:\t|-------------------------------------------------------------------- |----------------------\t|-------------------------------------------- |\n| order \t  | integer            \t|        \t                                                            | 0       \t            | set the order of flex items     \t          |\n| alignSelf | string              | `auto \\| flex-start \\| flex-end \\| center \\| baseline \\| stretch`   | auto   \t              | center the alignments for one of the items inside a flexible element  \t              |\n| flex  \t  | boolean \\| number   |  \t                                                                  | `false \\| 1-12`   \t  | sets the default flex size  \t              |\n| xs    \t  | number            \t|        \t                                                            | `1-12`                | 0 - 599px                                   |\n| sm    \t  | number            \t|        \t                                                            | `1-12`   \t            | 600 - 959px                                 |\n| md    \t  | number            \t|        \t                                                            | `1-12`                | 960px - 1280px              \t              |\n| lg    \t  | number            \t|        \t                                                            | `1-12`                | 1280px or greater           \t              |\n| className | string              |        \t                                                            |         \t            | set the className on the Col Element        |\n| style \t  | object              |                                                                     |         \t            | set the style on the Col Element            |\n| component | function \\| string \t|                                                                     | `div`        \t        | The component to render the Col as          |\n\n* `\u003cCol flex={6}\u003e` sets the default flex size\n* `\u003cCol flex\u003e` sets the item to auto stretch\n* `\u003cCol flex={6} xs={12}\u003e` xs (xs, sm, md, or lg) used togther with flex - you can easily set a default flex size for any size other than the xs breakpoint \n* `\u003cCol flex={6} order={2}\u003e ... \u003cCol flex={6} order={1}\u003e` The last Col will be ordered as first\n* values for flex ranges are dependent on columnDivisions\n\n## Basic Usage\n```\nimport { Container, Row, Col } from 'react-flexybox';\n```\n\n### UMD Usage\n```\n...\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://react-flexybox.netlify.com/react-flexybox.min.js\"\u003e\n\u003c/head\u003e\n...\n\n// ES6\nconst {\n  Container,\n  Row,\n  Col,\n} = ReactFlexyBox;\n\n//ES Old School\nvar Container = ReactFlexyBox.Container;\nvar Row = ReactFlexyBox.Row;\nvar Col = ReactFlexyBox.Col;\n\n```\n\n## Supported Browsers\nreact-flexybox is supports on browsers that support flex. It will be up to you to set your autoprefixing appropriatly especially if you use IE 11\n\n[Supported Browsers](https://caniuse.com/#search=flex)\n\n# Contributing\n* `npm install yarn jest -g`\n* `yarn build-all` to generate dist\n* `yarn build-demo` to generate/update demo\n\n## Scripts\n* `yarn build` - produces production version of your library under the `dist` folder\n* `yarn build-all` - produces production \u0026 dev version of your library under the `dist` folder\n* `yarn dev` - produces development version of react-flexybox and runs a watcher\n* `yarn test` - runs the tests\n* `yarn test:watch` - same as above but in a watch mode\n* `yarn demo:build` - builds the demo\n\n# Built with react-flexybox\n* [Galactic Fog's Gestalt Platform](http://www.galacticfog.com/)\n\n# Inspiration\n* https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n* https://v4-alpha.getbootstrap.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbetancur%2Freact-flexybox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbetancur%2Freact-flexybox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbetancur%2Freact-flexybox/lists"}