reacted-flex

React components to use with CSS3 Flexbox

More on Flex

Usage

import React from 'react';
import Flex from 'reacted-flex';

class Layout extends React.Component {
  render () {
    return (
      <Flex wrap justify-content="space-between">
        <img flex-grow="5" />
        <img flex-shrink="0" flex-basis="300px" />
        <img flex-align="end" />
      </Flex>
    );
  }
}

Container

display

{ display : flex }

<Flex />

{ display : inline-flex }

<Flex inline />

flex-direction

{ flex-direction : column }

<Flex column />
<Flex stack />

{ flex-direction : reverse }

<Flex reverse />

{ flex-direction : column-reverse }

<Flex column reverse />

flex-wrap

{ flex-wrap : no-wrap }

<Flex wrap={false} />

{ flex-wrap : wrap }

<Flex wrap />
<Flex wrap={true} />

{ flex-wrap : wrap-reverse }

<Flex wrap="reverse" />
<Flex wrap-reverse />

justify-content

{ justify-content : flex-start }

<Flex justify-content="flex-start" />

{ justify-content : flex-end }

<Flex justify-content="flex-end" />

{ justify-content : center }

<Flex justify-content="center" />

{ justify-content : space-between }

<Flex justify-content="space-between" />

{ justify-content : space-around }

<Flex justify-content="space-around" />

align-items

{ align-items : stretch }

<Flex align-items="stretch" />

{ align-items : flex-start }

<Flex align-items="flex-start" />

{ align-items : flex-end }

<Flex align-items="flex-end" />

{ align-items : center }

<Flex align-items="center" />

{ align-items : baseline }

<Flex align-items="baseline" />

align-content

{ align-content : stretch }

<Flex align-content="stretch" />

{ align-content : flex-start }

<Flex align-content="flex-start" />

{ align-content : flex-end }

<Flex align-content="flex-end" />

{ align-content : center }

<Flex align-content="center" />

{ align-content : space-between }

<Flex align-content="space-between" />

{ align-content : space-around }

<Flex align-content="space-around" />

Item

{ order : }

<div flex-order={Number} />

{ flex-grow : }

<div flex-grow={Number} />

{ flex-shrink : }

<div flex-shrink={Number} />

{ flex-basis : }

<div flex-basis={String} />

{ align-self : <auto | flex-start | flex-end | center | baseline | stretch> }

<div flex-align={String} />