react-material-layout class example

by billjohnston4

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-class-layout.min.css">
<div id="container" class="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 className="flex layout-column layout-align-space-between">
					<div className="flex layout-row layout-align-space-between">
						<div className="blue-box">1</div>
						<div className="blue-box">2</div>
						<div className="blue-box">3</div>
					</div>
					<div className="flex layout-row 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 className="flex layout-row layout-align-start-center">
						<div className="blue-box">1</div>
						<div className="blue-box">2</div>
						<div className="blue-box">3</div>
					</div>
					<div className="flex layout-row 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')
)