React flexbox layout and grid system



  • 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 (
        Box A
        Box B


// Fractional width

// Pixel width

// Responsive widths

// Padding

// Responsive padding

// Margin

// Responsive margin

// top, right, bottom, left

// x-axis

// y-axis

// align-items: center

// justify-content: space-between

// Flex wrap

// Flex direction column

// Order

// flex: 1 1 auto

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.