reaflex - Easy Flexbox in React

Use reaflex to create flexbox row and column layouts in your projects. It maps out the flexbox CSS properties to React component props. Under the hood, it uses styled-components for generating the CSS rules.

Install

npm i reaflex

yarn add reaflex

The following packages are needed as peer dependencies:

react >= 16.8.0
react-dom >= 16.8.0
styled-components >= 4.4.1
prop-types >= 15.7.0

Use

import { Flex, Item } from "reaflex";

const MyComponent = () => {
  return (
    <Flex direction="column" alignItems="center" justifyContent="center">
        <Item alignSelf="flex-end">Hello</Item>
        <Item as="span">Flex</Item>
        <Item alignSelf="flex-start">Box</Item>
    </Flex>
  );
};

Props

Flex

Prop	Type	Description
as	React.ElementType	The element to render. Defaults to div.
inline	boolean	Sets the display property to inline-flex when true and flex otherwise. Defaults to false.
direction	string	Sets the flex-direction property.
alignItems	string	Sets the align-items property.
justifyContent	string	Sets the justify-content property.
wrap	string	Sets the flex-wrap property.
flow	string	Sets the flex-flow property.
gap	string	Sets the gap property.
rowGap	string	Sets the row-gap property.
columnGap	string	Sets the column-gap property.

Item

Prop	Type	Description
as	React.ElementType	The element to render. Defaults to div.
order	number	Sets the order property.
alignSelf	string	Sets the align-self property.
grow	string \| number	Sets the flex-grow property.
shrink	string \| number	Sets the flex-shrink property.
basis	string	Sets the flex-basis property.
flex	string \| number	Sets the flex property.

Demo

Learn more

Flexbox Froggy is a fun game to learn Flexbox.
A Complete Guide to Flexbox by @chriscoyier.
Learn Flexbox on MDN Web Docs.
Typical use cases of Flexbox.

See other projects