A React components for flexbox layout written in typescript

Jul 15, 2018
A React components for flexbox layout written in typescript


Flexbox layout react components.

Reflexy is a React components for flexbox layout written in typescript.

With Reflexy

  • You don't need to worry about the prefixes of different browsers - Reflexy use an autoprefixer.

  • You don't need to do a concatenation of a lot of css classes:

    <div className={classNames(styles['flex'], styles['flex-column'], styles['flex-align-center'], ...)}> {children} </div>


    <Flex column alignItems="center" className="custom-class">{children}</Flex>
  • You can replace default output div tag:

    <Flex tagName="header">{children}</Flex>


    <header class="...">{children}</header>
  • You can tweak you own react component with flexbox layout (your component must accept className through props):

    <Flex component={MyComponent} column alignSelf="center" myProp="myPropValue" className={styles['my-class']} > {children} </Flex>

    will be

    <MyComponent myProp="myPropValue" className="[reflexy classes] my-class">{children}</MyComponent>


yarn add react reflexy


npm install --save react reflexy

Reflexy has own css files so you need provide loader for css files placed in node_modules folder. With webpack it's maybe css-loader:

{ test: /\.css$/, include: path.join(__dirname, 'node_modules'), // or include: /reflexy/ use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true, localIdentName: '[local]', }, }, ], },


import { Flex } from 'reflexy'; ... <Flex row justifyContent="center"> ... </Flex>



Default style is just display: flex;

  • inline?: boolean; - Sets display to inline-flex.
  • alignContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'stretch' | 'initial' | 'inherit'; - Sets align-content to corresponding value.
  • alignItems?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'initial' | 'inherit'; - Sets align-items to corresponding value.
  • alignSelf?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'auto' | 'initial' | 'inherit'; - Sets align-self to corresponding value.
  • justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit'; - Sets justify-content to corresponding value.
  • basis?: 'none' | 'auto' | 'fill' | 'content' |fit-content' | 'min-content' | 'max-content'; - Sets flex-basis to corresponding value.
  • grow?: 0..24; - Sets flex-grow to corresponding value. Also accepts boolean value: true is equals to 1, false is equals to 0.
  • shrink?: 0..24; - Sets flex-shrink to corresponding value. Also accepts boolean value: true is equals to 1, false is equals to 0.
  • row?: boolean; - Sets flow-direction to row.
  • column?: boolean; - Sets flow-direction to column. Takes a precedence over row.
  • reverse?: boolean; - Used with row or col. Sets flow-direction to column-reverse or row-reverse.
  • wrap?: boolean | 'reverse'; - Sets flex-wrap to wrap or wrap-reverse.
  • order?: number; - Sets order to corresponding value.
  • hfill?: boolean; - Stretch by horizontal.
  • vfill?: boolean; - Stretch by vertical.
  • fill?: 'v' | 'h' | 'all'; - Stretch by v - vertical or h - horizontal or all - both. Also accepts boolean value: true is equals to all.
  • component?: React.ComponentType<any>; - Sets React component as a container. Component must accept className through props.
  • tagName?: string; - Html tag name for output container. Takes a precedence over component.
  • center?: boolean; - Sets justifyContent and alignItems to center. Takes a precedence over justifyContent and alignItems.
  • className?: string; - CSS class name.
  • style?: React.CSSProperties; - Inline styles.
  • and all other props of html element.


If you need more features or you find a bug, please, open an issue or make PR.