react-flexer

flexbox grid layout like rebass, just faster. Built with @quarkly/elementary

Why would you use Flexer instead of Rebass?

• Flexer is faster than Rebass 🏃🏻
• Flexer fully supports a system of short properties 😱

Usage

$ npm i react-flexer
$ npm i styled-components

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

ReactDom.render(
  <Flex w={1/2}>
    <Box m={3}>
      Box
    </Box>
  </Flex>,
  document.getElementById('root'),
);

Props

Layout

• display / d
• height / h
• minHeight / mih
• mixHeight / mah
• width / w
• minWidth / miw
• maxWidth / maw
• size

Spaces

• padding / p
• paddingTop / pt
• paddingRight / pr
• paddingBottom / pb
• paddingLeft / pl
• paddingX / px
• paddingY / py
• margin / m
• marginTop / mt
• marginRight / mr
• marginBottom / mb
• marginLeft / ml
• marginX / mx
• marginY / my

Flex

• alignItems / ai
• alignContent / ac
• justifyItems / ji
• justifyContent / jc
• flexWrap / fxw
• flexBasis / fxb
• flexDirection / fxd
• flex / fx
• order / ord