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
Or
yarn add reaflex

The following packages are needed as peer dependencies:


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

PropTypeDescription
asstringThe HTML tag to render. Defaults to div.
inlinebooleanSets the display property to inline-flex when true and flex otherwise. Defaults to false.
directionstringSets the flex-direction property.
alignItemsstringSets the align-items property.
justifyContentstringSets the justify-content property.
wrapstringSets the flex-wrap property.
flowstringSets the flex-flow property.
gapstringSets the gap property.
rowGapstringSets the row-gap property.
columnGapstringSets the column-gap property.

Item

PropTypeDescription
asstringThe HTML tag to render. Defaults to div.
ordernumberSets the order property.
alignSelfstringSets the align-self property.
growstring | numberSets the flex-grow property.
shrinkstring | numberSets the flex-shrink property.
basisstringSets the flex-basis property.
flexstring | numberSets the flex property.

Demo


Learn more