{"id":21106930,"url":"https://github.com/buildo/react-flexview","last_synced_at":"2025-05-16T17:08:01.373Z","repository":{"id":57380533,"uuid":"59039486","full_name":"buildo/react-flexview","owner":"buildo","description":"A powerful React component to abstract over flexbox and create any layout on any browser","archived":false,"fork":false,"pushed_at":"2024-08-28T00:01:15.000Z","size":5451,"stargazers_count":279,"open_issues_count":7,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-13T09:46:14.830Z","etag":null,"topics":["flex","flexbox","grid","layout","react","vertical-align"],"latest_commit_sha":null,"homepage":"http://react-components.buildo.io/#flexview","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/buildo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","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":"2016-05-17T16:25:18.000Z","updated_at":"2025-01-21T06:04:44.000Z","dependencies_parsed_at":"2025-04-04T14:02:38.769Z","dependency_job_id":"e01b9a32-8a4f-4449-a365-161834994ba9","html_url":"https://github.com/buildo/react-flexview","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/buildo%2Freact-flexview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-flexview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-flexview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-flexview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buildo","download_url":"https://codeload.github.com/buildo/react-flexview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573589,"owners_count":22093731,"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":["flex","flexbox","grid","layout","react","vertical-align"],"created_at":"2024-11-20T00:34:27.713Z","updated_at":"2025-05-16T17:08:01.354Z","avatar_url":"https://github.com/buildo.png","language":"TypeScript","readme":"# FlexView\nA powerful React component to abstract over *flexbox* and create any layout on any browser.\n\n## Install\n```\nyarn add react-flexview\n```\n\n## Why\nThe *flexbox* API is powerful but far from being perfect.\nThe API is complex and there are still many inconsistencies between browsers that force developers to overuse vendor prefixes and literally do magic tricks to achieve the desired layout.\n\nFor these reasons, we asked ourselves: is there a way to simplify the API and handle any browser inconsistency in a single place? Our attempt to answer \"yes!\" to that question gave birth to `FlexView`.\n\n```jsx\n// flex row\n\u003cFlexView /\u003e\n\n// flex column\n\u003cFlexView column /\u003e\n\n// grow, shrink and basis\n\u003cFlexView grow shrink basis={100} /\u003e\n\u003cFlexView grow={2} shrink={1} basis='auto' /\u003e\n\u003cFlexView basis={100} /\u003e // shrink is set to `false` by default so you're certain to a have it `100px` wide/tall\n\n// wrap\n\u003cFlexView wrap /\u003e\n```\n\nRemember how difficult it was to center a `div` inside another `div`?\n*flexbox* definitely improved it, but still having to switch from `align-items` to `justify-content` based on `flex-direction` of the parent is confusing and error prone.\n\n`FlexView` lets you align and center `children` with two intuitive props: `vAlignContent` and `hAlignContent`.\n\n```jsx\n\u003cFlexView hAlignContent='center' vAlignContent='center'\u003e\n  \u003cFlexView\u003ethe center of the Earth\u003c/FlexView\u003e\n\u003c/FlexView\u003e\n```\n\n## How to use\nIn your component:\n\n```jsx\nimport React from 'react';\nimport FlexView from 'react-flexview';\n\nexport default class Component extends React.Component {\n  render() {\n    return (\n      \u003cFlexView vAlignContent='center'\u003e\n        I'm vertically centered!\n      \u003c/FlexView\u003e\n    );\n  }\n}\n```\n\n### Props\n|Name|Type|Default|Description|\n|----|----|-------|-----------|\n| **children** | \u003ccode\u003eReactChildren\u003c/code\u003e |  | **required**. FlexView content |\n| **column** | \u003ccode\u003eBoolean\u003c/code\u003e |  | *optional*. Flex-direction: column |\n| **vAlignContent** | \u003ccode\u003eenum(\"top\" \u0026#124; \"center\" \u0026#124; \"bottom\")\u003c/code\u003e |  | *optional*. Align content vertically |\n| **hAlignContent** | \u003ccode\u003eenum(\"left\" \u0026#124; \"center\" \u0026#124; \"right\")\u003c/code\u003e |  | *optional*. Align content horizontally |\n| **marginLeft** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Margin-left property (\"auto\" to align self right) |\n| **marginTop** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Margin-top property (\"auto\" to align self bottom) |\n| **marginRight** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Margin-right property (\"auto\" to align self left) |\n| **marginBottom** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Margin-bottom property (\"auto\" to align self top) |\n| **grow** | \u003ccode\u003eunion(Boolean \u0026#124; Number)\u003c/code\u003e |  | *optional*. Property (for parent primary axis) |\n| **shrink** | \u003ccode\u003eunion(Boolean \u0026#124; Number)\u003c/code\u003e |  | *optional*. Flex-shrink property |\n| **basis** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Flex-basis property |\n| **wrap** | \u003ccode\u003eBoolean\u003c/code\u003e |  | *optional*. Wrap content |\n| **height** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Height property (for parent secondary axis) |\n| **width** | \u003ccode\u003eunion(String \u0026#124; Number)\u003c/code\u003e |  | *optional*. Width property (for parent secondary axis) |\n| **className** | \u003ccode\u003eString\u003c/code\u003e |  | *optional*. Additional `className` for wrapper element |\n| **style** | \u003ccode\u003eObject\u003c/code\u003e |  | *optional*. Inline-style overrides for wrapper element |\n\n\n## Demo\nHere's a [live playground](http://react-components.buildo.io/#flexview)\n\n## Documentation\nRefer to the [Book of FlexView](http://buildo.github.io/react-flexview/)\n\n## Supported browsers\nWe removed vendor prefixes in [#66](https://github.com/buildo/react-flexview/issues/66), since than we only supports browsers that don't require prefixes for *flexbox* CSS properties which are most browsers:\n- IE 11\n- Edge (any version)\n- Google Chrome 29+\n- Firefox 28+\n- Safari 9+\n\nIf you need to support older browsers, try with `FlexView` `3.x`.\n\n## Used By\nAt [buildo](https://buildo.io/) we've been using `FlexView` in production in every web application we built since [July 2015](https://github.com/buildo/react-components/pull/7) (it was in a different repo back then).\n\nAs of today, `FlexView` has replaced the `div` as the brick of our projects and, thanks to it, our developers can finally build without too much trouble complex layouts that work the same on Chrome, Firefox, Safari and **Internet Explorer 11**.\n\nYou can see it in action here:\n- [buildo.io](https://buildo.io/)\n- [LexDo.it](https://www.lexdo.it/)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildo%2Freact-flexview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuildo%2Freact-flexview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildo%2Freact-flexview/lists"}