The react-display-flex deals with the flexible layout module as simple as possible by using only plain css and classes.
See Storybook here.
See props here.
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. 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:
import { FlexibleBox } from 'react-display-flex'
<FlexibleBox column />
// which ends up rendering a
// <div class="react-display-flex-flex react-display-flex-column" />.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 <div /> as the html element to be flexible. This can be seen in a good example in the Layout Example.
import { FlexibleBox } from 'react-display-flex'
<FlexibleBox column element="section" />
// which ends up rendering a
// <section class="react-display-flex-flex react-display-flex-column" />There are another libs which handles the Flexbox Layout with different approaches:
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.