react-material-layout example

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://rawgit.com/billjohnston/react-material-layout/master/dist/react-material-layout.min.css">
<div id="container" data-layout="column">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html,
	body,
  #container {
	  height: 100%;
	  position: relative;
	}
	
	body {
	  margin: 0;
	  padding: 0;
	  font-family: Arial, sans-serif;
	}
	
	.blue-box {
	  background-color: #4c6ef5;
	  color: white;
	  height: 18px;
	  width: 20px;
	  text-align: center;
	}

Babel + JSX

// You can either build css with webpack, or simply link in the HTML

// HTML link:
// <link rel="stylesheet" href="https://raw.githubusercontent.com/billjohnston/react-material-layout/master/dist/react-material-layout.min.css">

// Webpack: 
// import 'react-material-layout/dist/react-material-layout.min.css'

class FlexboxTest extends React.Component{
	render() {
		return (
			<div data-flex data-layout="column" data-layout-align="space-around" style="border:1px;">
				<div data-flex data-layout="row" data-layout-align="space-between">
					<div className="blue-box">1</div>
					<div className="blue-box">2</div>
					<div className="blue-box">3</div>
				</div>
				<div data-flex data-layout="row" data-layout-align="space-around center">
					<div className="blue-box">1</div>
					<div className="blue-box">2</div>
					<div className="blue-box">3</div>
				</div>
				<div data-flex data-layout="row" data-layout-align="start center">
					<div className="blue-box">1</div>
					<div className="blue-box">2</div>
					<div className="blue-box">3</div>
				</div>
				<div data-flex data-layout="row" data-layout-align="end center">
					<div className="blue-box">1</div>
					<div className="blue-box">2</div>
					<div className="blue-box">3</div>
				</div>
			</div>
		)
	}
}

ReactDOM.render(
  <FlexboxTest />,
  document.getElementById('container')
)