React flexbox layout and grid system

by React

Reflexbox

Responsive React Flexbox Grid System

View demo Download Source

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