react-flexbox-grid

React flexbox grid layout component.

size:

• react-flexbox-grid.js 5.66 kB
• react-flexbox-grid.js.map 26 kB

resource:

• http://roylee0704.github.io/react-flexbox-grid/
• https://ant.design/components/grid-cn/

dependencies:

• https://github.com/afeiship/webkit-sass-flexbox-grid.git
• override config:

$grid-padding-width:0;
$grid-responsive:();

usage:

• import react-flexbox-grid

// npm install --save afeiship/react-flexbox-gridimport{Row,Col}from'react-flexbox-grid';

• layout your apps:

<Rowalign='center'><Colspan={33}>col1 <br/> cosdjflksjdfl <br/></Col><Col>Left...</Col></Row><Rowalign='center' wrap={true}><Colspan={33}>col1</Col><Colspan={33}>col1</Col><Colspan={33}>col1</Col><Colspan={33}>col1</Col><Colspan={33}>col1</Col></Row><Rowalign='center' wrap={true}><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col><Colstyle={{width:'120px'}}>col1</Col></Row><Rowjustify='center'><divclassName="l-box">col1</div><divclassName="l-box">col1</div><divclassName="l-box">col1</div><divclassName="l-box">col1</div></Row><Rowjustify='around'><divclassName="l-box">col1</div><divclassName="l-box">col1</div><divclassName="l-box">col1</div><divclassName="l-box">col1</div></Row><Rowjustify='between'><divclassName="l-box">col1</div><divclassName="l-box">col1</div><divclassName="l-box">col1</div><divclassName="l-box">col1</div></Row>