https://github.com/wellgrisa/react-display-flex
A simple and cssish way of dealing with the flexible layout
https://github.com/wellgrisa/react-display-flex
flex flex-layout flexbox flexbox-css flexible flexible-layout
Last synced: 3 months ago
JSON representation
A simple and cssish way of dealing with the flexible layout
- Host: GitHub
- URL: https://github.com/wellgrisa/react-display-flex
- Owner: wellgrisa
- Created: 2021-03-22T22:57:22.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-29T17:11:20.000Z (over 4 years ago)
- Last Synced: 2024-04-14T19:11:13.661Z (over 1 year ago)
- Topics: flex, flex-layout, flexbox, flexbox-css, flexible, flexible-layout
- Language: TypeScript
- Homepage: https://wellgrisa.github.io/react-display-flex/
- Size: 1.52 MB
- Stars: 5
- Watchers: 1
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://app.circleci.com/pipelines/github/wellgrisa/react-display-flex)
[](https://github.com/facebook/jest)
[](https://github.com/wellgrisa/react-display-flex)
[](https://wellgrisa.github.io/react-display-flex/)
# React Display Flex - Why?
The `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.
See [Storybook here](https://wellgrisa.github.io/react-display-flex/).
See [props here](https://wellgrisa.github.io/react-display-flex/?path=/story/props--page).
The 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.
Therefore, **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.
This 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.
A simple usage:
```jsx
import { FlexibleBox } from 'react-display-flex'
// which ends up rendering a
//
```
```css
.react-display-flex-flex {
display: flex;
}
.react-display-flex-column {
flex-direction: column;
}
```
Another important thing to mention is the possibility of having different elements from `
` 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).
```jsx
import { FlexibleBox } from 'react-display-flex'
// which ends up rendering a
//
```
There are another libs which handles the Flexbox Layout with different approaches:
- [flexbox-react](https://github.com/nachoaIvarez/flexbox-react)
- [react-css-flex](https://github.com/bikk-uk/react-css-flex)
- [reflexbox](https://github.com/jxnblk/reflexbox)
- [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid)
- [react-styled-flexboxgrid](https://www.npmjs.com/package/react-styled-flexboxgrid)
and so on... each one is great in some way, so it's just a matter of try and feel which one fits you better.