React flexbox layout and grid system

Reflexbox

Responsive React Flexbox Grid System

Features

• Simple API for quickly controlling layout
• Helps promote composability and separation of concerns
• CSS-in-JS built in - no external dependencies
• Only generates the CSS needed to render

Getting Started

npm install reflexbox

import React from 'react'
import { Flex, Box } from 'reflexbox'

class Component extends React.Component {
  render() {
    return (
      <Flex p={2} align='center'>
        <Box px={2} w={1/2}>Box A</Box>
        <Box px={2} w={1/2}>Box B</Box>
      </Flex>
    )
  }
}

GitHub