Skip to content
React flexbox implementation
Branch: master
Clone or download
Latest commit 096c9f5 Dec 10, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples improved dev tools Apr 13, 2017
lib improved dev tools Apr 13, 2017
src Strip props that should not be set on a div Jul 6, 2016
.babelrc improved dev tools Apr 13, 2017
.eslintrc update to babel 5 and eslint e.a. Apr 4, 2015
.gitignore improved dev tools Apr 13, 2017
README.md improved dev tools Apr 13, 2017
package.json 3.1.4 Dec 10, 2017
webpack.config.js improved dev tools Apr 13, 2017

README.md

React-flexbox

Implementation of css flexbox in react with inline styles. It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for it I can add a transpiled version to the repo.

API

Install

npm install react-flexbox --save
yarn add react-flexbox
const View = require('react-flexbox')
// or
import View from 'react-flexbox'

UMD

Module exposed as ReactFlexbox

<script src="https://unpkg.com/react-flexbox/dist/react-flexbox.js"></scrip>
const View = ReactFlexbox.default

Components

View

A flex view element that can be used instead of FlexRow or FlexColumn

This is default import.

Some simple examples:

<View row>
  <View auto row>
    <View column width="100px"><View className="red">Left</View></View>
    <View column width="100px"><View className="red">Left</View></View>
  </View>
  <View row className="green">All the place in the world</View>
</View>
<View column height="200px">
  <View column auto>
    <View className="green" height="20px">Green</View>
    <View className="red" height="20px">Red</View>
  </View>
  <View className="green">De rest</View>
</View>

Props

All props are optional and can be set on both components.

row

boolean, sets the flexDirection to row

column

boolean, sets the flexDirection to column

auto

boolean, sets flex to '0 0 auto'

className

must be a string

height

height must be a string with a valid css unit.

style

Will be merged the flex style. This allows you to override the style.

width

width can be either a number width={2}, this acts as flex-grow or a string with a unit (for example % or px) - it must be a valid css unit.

FlexRow

deprecated

A flex row. This is a View with prop row

FlexColumn

deprecated

A flex column This is a View with prop column

Examples

See examples

To run, make sure the devDependencies are installed and run npm run example, after that surf to http://localhost:8080/webpack-dev-server/

You can’t perform that action at this time.