react-layout-vertical

React component for layout[top/middle/bottom] vertical.

properties:

  static propTypes = {
    className:PropTypes.string,
    justify:PropTypes.string
  };

usage:

import {
  ReactLayoutItem,
  ReactLayoutVertical,
} from './main';

class App extends React.Component{
  render(){
    return (
      <div className="hello-react-layout-tmb">
        <h1>justify-start</h1>
        <ReactLayoutVertical className="test-tmb"justify='start'>
          <ReactLayoutItem style={{height:'50px'}}>top</ReactLayoutItem>
          <ReactLayoutItem style={{border:'1px solid #f00'}}>top</ReactLayoutItem>
          <ReactLayoutItem style={{height:'30px'}}>bottom</ReactLayoutItem>
        </ReactLayoutVertical>


        <h1>justify-end</h1>
        <ReactLayoutVertical className="test-tmb" justify='end'>
          <ReactLayoutItem className="top" style={{height:'50px'}}>top</ReactLayoutItem>
          <ReactLayoutItem className="bottom"  style={{height:'20px'}}>bottom</ReactLayoutItem>
        </ReactLayoutVertical>


        <h1>justify-space-between</h1>
        <ReactLayoutVertical className="test-tmb" justify='between'>
          <ReactLayoutItem className="top">top</ReactLayoutItem>
          <ReactLayoutItem className="bottom" >bottom</ReactLayoutItem>
        </ReactLayoutVertical>
    </div>
    );
  }
}

resource:

• http://www.cnblogs.com/Kummy/p/4966937.html
• https://github.com/steven5538/vue-button
• https://yarnpkg.com/en/docs/install