{"id":29227082,"url":"https://github.com/wellgrisa/react-display-flex","last_synced_at":"2025-07-03T09:09:48.945Z","repository":{"id":52847877,"uuid":"350513534","full_name":"wellgrisa/react-display-flex","owner":"wellgrisa","description":"A simple and cssish way of dealing with the flexible layout","archived":false,"fork":false,"pushed_at":"2021-04-29T17:11:20.000Z","size":1589,"stargazers_count":5,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T19:11:13.661Z","etag":null,"topics":["flex","flex-layout","flexbox","flexbox-css","flexible","flexible-layout"],"latest_commit_sha":null,"homepage":"https://wellgrisa.github.io/react-display-flex/","language":"TypeScript","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/wellgrisa.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":"2021-03-22T22:57:22.000Z","updated_at":"2024-04-14T19:11:13.662Z","dependencies_parsed_at":"2022-08-23T09:01:26.812Z","dependency_job_id":null,"html_url":"https://github.com/wellgrisa/react-display-flex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wellgrisa/react-display-flex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellgrisa%2Freact-display-flex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellgrisa%2Freact-display-flex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellgrisa%2Freact-display-flex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellgrisa%2Freact-display-flex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wellgrisa","download_url":"https://codeload.github.com/wellgrisa/react-display-flex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellgrisa%2Freact-display-flex/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263296638,"owners_count":23444498,"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","flex-layout","flexbox","flexbox-css","flexible","flexible-layout"],"created_at":"2025-07-03T09:09:48.358Z","updated_at":"2025-07-03T09:09:48.919Z","avatar_url":"https://github.com/wellgrisa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![\u003cORG_NAME\u003e](https://circleci.com/gh/wellgrisa/react-display-flex.svg?style=shield)](https://app.circleci.com/pipelines/github/wellgrisa/react-display-flex)\n[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)\n![Statements](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg)\n[![GitHub stars](https://img.shields.io/github/stars/wellgrisa/react-display-flex?style=social)](https://github.com/wellgrisa/react-display-flex)\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://wellgrisa.github.io/react-display-flex/)\n\n# React Display Flex - Why?\n\nThe `react-display-flex` deals with the [flexible layout module](https://www.w3.org/TR/css-flexbox-1/) as simple as possible by using only plain css and classes.\n\nSee [Storybook here](https://wellgrisa.github.io/react-display-flex/).\n\nSee [props here](https://wellgrisa.github.io/react-display-flex/?path=/story/props--page).\n\nThe idea of this another flex lib is to be dependencyless and aim people who like to have their styles in classes and styles files only.\n\nTherefore, **there are no properties to deal with value-based attribute** like height, width, flex-shrink, flex-basis. To handle these, when necessary, you should add a specific className or work with the cascade stylesheets. The only exception is the property `flexGrow` which will add the class `react-display-flex-grow`, adding the attribute `flex-grow: 1` to the component. The idea behind this is a very common scenario which we need the component to grow in the full area.\n\nThis lib relies on boolean properties to make it straightforward and also in the knowledge of the person using it, i.e.: there are no validations regarding its properties, it's just a way of setting the css attributes as [classes](https://github.com/wellgrisa/react-display-flex/blob/main/src/react-display.css). It's just like adding attributes in a class, you can add as much as you want, but it wouldn't work if you add confusing rules.\n\nA simple usage:\n\n```jsx\nimport { FlexibleBox } from 'react-display-flex'\n\n\u003cFlexibleBox column /\u003e\n\n// which ends up rendering a\n// \u003cdiv class=\"react-display-flex-flex react-display-flex-column\" /\u003e\n```\n\n```css\n.react-display-flex-flex {\n  display: flex;\n}\n\n.react-display-flex-column {\n  flex-direction: column;\n}\n```\n\nAnother important thing to mention is the possibility of having different elements from `\u003cdiv /\u003e` as the html element to be flexible. This can be seen in a good example in the [Layout Example](https://wellgrisa.github.io/react-display-flex/?path=/story/layout-example--page).\n\n```jsx\nimport { FlexibleBox } from 'react-display-flex'\n\n\u003cFlexibleBox column element=\"section\" /\u003e\n\n// which ends up rendering a\n// \u003csection class=\"react-display-flex-flex react-display-flex-column\" /\u003e\n```\n\nThere are another libs which handles the Flexbox Layout with different approaches:\n\n- [flexbox-react](https://github.com/nachoaIvarez/flexbox-react)\n- [react-css-flex](https://github.com/bikk-uk/react-css-flex)\n- [reflexbox](https://github.com/jxnblk/reflexbox)\n- [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid)\n- [react-styled-flexboxgrid](https://www.npmjs.com/package/react-styled-flexboxgrid)\n\nand so on... each one is great in some way, so it's just a matter of try and feel which one fits you better.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwellgrisa%2Freact-display-flex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwellgrisa%2Freact-display-flex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwellgrisa%2Freact-display-flex/lists"}