reflexbox

React flexbox layout and grid system

Github星跟踪图

Reflexbox

Responsive React Flexbox Grid System

http://jxnblk.com/reflexbox

Build Status
npm version

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>
    )
  }
}

Usage

// Fractional width
<Box w={1/2} />

// Pixel width
<Box w={128} />

// Responsive widths
<Box w={[ 1, 1/2, 1/4 ]} />

// Padding
<Box p={2} />

// Responsive padding
<Box p={[ 1, 2, 3 ]} />

// Margin
<Box m={2} />

// Responsive margin
<Box m={[ 1, 2, 3 ]} />

// top, right, bottom, left
<Box
  mt={1}
  mr={2}
  mb={3}
  ml={2}
/>

// x-axis
<Box mx={-2} />

// y-axis
<Box my={3} />

// align-items: center
<Flex align='center' />

// justify-content: space-between
<Flex justify='space-between' />

// Flex wrap
<Flex wrap />

// Flex direction column
<Flex column />

// Order
<Box order={2} />

// flex: 1 1 auto
<Box auto />

API

<Flex />

Component primitive with display: flex

<Box />

Primitive for controlling width, margin, padding and more.

Props

Both <Flex /> and <Box /> share the same props.

  • w (number, string) sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units.
  • flex (boolean) sets display: flex
  • wrap (boolean) sets flex-wrap: wrap
  • column (boolean) sets flex-direction: column
  • auto (boolean) sets flex: 1 1 auto
  • order (number) sets order
  • align (string) sets align-items
  • justify (string) sets justify-content

Margin and Padding

Margin and padding props accept numbers 0-4 for values from the spacing scale [ 0, 8, 16, 32, 64 ].
Numbers greater than 4 will be used as pixel values.
Negative values can be used for negative margins.
Strings can be passed for other CSS values, e.g. mx='auto'

  • m (number, string) margin based on a scale from 0–4.
  • mx (number, string) x-axis margin based on a scale from 0–4.
  • my (number, string) y-axis margin based on a scale from 0–4.
  • mt (number, string) margin-top based on a scale from 0–4.
  • mb (number, string) margin-bottom based on a scale from 0–4.
  • ml (number, string) margin-left based on a scale from 0–4.
  • mr (number, string) margin-right based on a scale from 0–4.
  • p (number, string) padding based on a scale from 0–4.
  • px (number, string) x-axis padding based on a scale from 0–4.
  • py (number, string) y-axis padding based on a scale from 0–4.
  • pt (number, string) padding-top based on a scale from 0–4.
  • pb (number, string) padding-bottom based on a scale from 0–4.
  • pl (number, string) padding-left based on a scale from 0–4.
  • pr (number, string) padding-right based on a scale from 0–4.

Responsive Array Prop Values

All props accept arrays as values for mobile-first responsive styles.

// Set widths for different breakpoints, starting from smallest to largest
// This example will be 100% width below the smallest breakpoint,
// then 50% and 25% for the next two breakpoints respectively
<Box w={[ 1, 1/2, 1/4 ]} />

Null values can be passed to the array to skip a breakpoint.

<Box w={[ 1, null, 1/2 ]} />

Configuration

Values for the breakpoints and space scale can be configured with
React Context.

Context can be set manually or with the <ReflexProvider /> component.

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

const space = [ 0, 6, 12, 18, 24 ]
const breakpoints = [ 32, 48, 64 ]

class App extends React.Component {
  render () {
    return (
      <ReflexProvider
        space={space}
        breakpoints={breakpoints}>
        <Flex mx={-2}>
          <Box w={1/4} px={2}>Box</Box>
          <Box w={1/4} px={2}>Box</Box>
          <Box w={1/4} px={2}>Box</Box>
          <Box w={1/4} px={2}>Box</Box>
        </Flex>
      </ReflexProvider>
    )
  }
}

Higher Order Component

The core Reflexbox higher-order component can be used on any element that accepts className as a prop.

import React from 'react'
import { reflex } from 'reflexbox'
import MyInput from './MyInput'

const FlexInput = reflex(MyInput)

const App = () => (
  <div>
    <FlexInput
      w={1/2}
      mb={2}
      defaultValue='Flex Input'
    />
  </div>
)

Caveats

This currently DOES NOT work in Node.js server-side applications.
If you need server-side support, see version ^2.2.0 or one of the related libraries below.


MIT License

主要指标

概览
名称与所有者jxnblk/reflexbox
主编程语言JavaScript
编程语言JavaScript (语言数: 1)
平台
许可证
所有者活动
创建于2015-10-10 20:30:15
推送于2018-01-23 13:31:47
最后一次提交2018-01-23 08:31:35
发布数14
最新版本名称v3.0.1 (发布于 2018-01-23 08:31:35)
第一版名称v1.0.0 (发布于 2016-02-23 21:19:22)
用户参与
星数1.4k
关注者数26
派生数71
提交数275
已启用问题?
问题数53
打开的问题数0
拉请求数14
打开的拉请求数0
关闭的拉请求数7
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?