reflexbox

React flexbox layout and grid system http://jxnblk.com/reflexbox

Reflexbox

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

Usage

// 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.

shares