https://github.com/eddort/react-flexer

flexbox grid layout like rebass, just faster
https://github.com/eddort/react-flexer

cssinjs flexbox quarkly react rebass styled-components styled-system

Last synced: 2 months ago
JSON representation

flexbox grid layout like rebass, just faster

• Host: GitHub
• URL: https://github.com/eddort/react-flexer
• Owner: eddort
• License: mit
• Created: 2019-08-11T07:33:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-15T14:01:49.000Z (over 5 years ago)
• Last Synced: 2024-10-11T16:03:57.297Z (2 months ago)
• Topics: cssinjs, flexbox, quarkly, react, rebass, styled-components, styled-system
• Language: JavaScript
• Homepage:
• Size: 323 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


[![Build Status][badge]][travis]

[![Coverage][coverage-badge]][coverage]

[![Version][version-badge]][npm]

![MIT License][license]

[badge]: https://flat.badgen.net/travis/eddort/react-flexer/master

[travis]: https://travis-ci.com/eddort/react-flexer

[coverage-badge]: https://flat.badgen.net/codecov/c/github/eddort/react-flexer

[coverage]: https://codecov.io/github/eddort/react-flexer

[version-badge]: https://flat.badgen.net/npm/v/react-flexer

[npm]: https://npmjs.com/package/react-flexer

[license]: https://flat.badgen.net/badge/license/MIT/blue

# react-flexer 

### flexbox grid layout like rebass, just faster. Built with [@quarkly/elementary](https://github.com/quarkly/elementary)

## Why would you use Flexer instead of Rebass?

 - Flexer is faster than Rebass 🏃🏻

 - Flexer fully supports a system of short properties 😱

## Usage

```bash

$ npm i react-flexer

$ npm i styled-components

```

```jsx

import React from 'react';

import ReactDom from 'react-dom';

import { Flex, Box } from 'react-flexer';

ReactDom.render(

  

    

      Box

    

  ,

  document.getElementById('root'),

);

```

## Props

#### Layout

- [display / d](https://github.com/quarkly/elementary/blob/master/docs/props.md#display)

- [height / h](https://github.com/quarkly/elementary/blob/master/docs/props.md#height)

- [minHeight / mih](https://github.com/quarkly/elementary/blob/master/docs/props.md#minheight)

- [mixHeight / mah](https://github.com/quarkly/elementary/blob/master/docs/props.md#maxheight)

- [width / w](https://github.com/quarkly/elementary/blob/master/docs/props.md#width)

- [minWidth / miw](https://github.com/quarkly/elementary/blob/master/docs/props.md#minwidth)

- [maxWidth / maw](https://github.com/quarkly/elementary/blob/master/docs/props.md#maxwidth)

- [size](https://github.com/quarkly/elementary/blob/master/docs/props.md#size)

#### Spaces

- [padding / p](https://github.com/quarkly/elementary/blob/master/docs/props.md#p)

- [paddingTop / pt](https://github.com/quarkly/elementary/blob/master/docs/props.md#pt)

- [paddingRight / pr](https://github.com/quarkly/elementary/blob/master/docs/props.md#pr)

- [paddingBottom / pb](https://github.com/quarkly/elementary/blob/master/docs/props.md#pb)

- [paddingLeft / pl](https://github.com/quarkly/elementary/blob/master/docs/props.md#pl)

- [paddingX / px](https://github.com/quarkly/elementary/blob/master/docs/props.md#px)

- [paddingY / py](https://github.com/quarkly/elementary/blob/master/docs/props.md#py)

- [margin / m](https://github.com/quarkly/elementary/blob/master/docs/props.md#m)

- [marginTop / mt](https://github.com/quarkly/elementary/blob/master/docs/props.md#mt)

- [marginRight / mr](https://github.com/quarkly/elementary/blob/master/docs/props.md#mr)

- [marginBottom / mb](https://github.com/quarkly/elementary/blob/master/docs/props.md#mb)

- [marginLeft / ml](https://github.com/quarkly/elementary/blob/master/docs/props.md#ml)

- [marginX / mx](https://github.com/quarkly/elementary/blob/master/docs/props.md#mx)

- [marginY / my](https://github.com/quarkly/elementary/blob/master/docs/props.md#my)

#### Flex

- [alignItems / ai](https://github.com/quarkly/elementary/blob/master/docs/props.md#alignitems)

- [alignContent / ac](https://github.com/quarkly/elementary/blob/master/docs/props.md#aligncontent)

- [justifyItems / ji](https://github.com/quarkly/elementary/blob/master/docs/props.md#justifyitems)

- [justifyContent / jc](https://github.com/quarkly/elementary/blob/master/docs/props.md#justifycontent)

- [flexWrap / fxw](https://github.com/quarkly/elementary/blob/master/docs/props.md#flexwrap)

- [flexBasis / fxb](https://github.com/quarkly/elementary/blob/master/docs/props.md#flexbasis)

- [flexDirection / fxd](https://github.com/quarkly/elementary/blob/master/docs/props.md#flexdirection)

- [flex / fx](https://github.com/quarkly/elementary/blob/master/docs/props.md#flex)

- [order / ord](https://github.com/quarkly/elementary/blob/master/docs/props.md#order)