!Statements

React Display Flex - Why?

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:

``jsx
import { FlexibleBox } from 'react-display-flex'

// which ends up rendering a
//