flexbox

cssのdisplayをflexとし、幅の比率や順番を簡単に記述することができます。

.container {
	width: 300px;
	height: 300px;
	color: #fff;
	background: #eee;
	display: flex;
	/*flex-direction:column-reverse;*/
	/*flex-wrap: wrap;*/
	/*flex-wrap: wrap-reverse;*/
	/*flex-flow: wrap column;*/
	/*justify-content: flex-start;*/
	/*justify-content: flex-end;*/
	/*justify-content: space-between;*/
	/*justify-content: space-around;*/
	/*align-items: flex-start;*/
	/*align-items: flex-end;*/
	/*align-items: flex-center;*/
	/*align-items: stretch;*/
	/*align-content: flex-start;*/
	/*align-content: space-between;*/
	/*align-content: space-around;*/
	justify-content: center;
	align-items: center;

}
.box {
	width:80px;
	height: 80px;
}
/*
flex-grow, shrink, basis, 
margin:auto;
*/
.box-1 { background: tomato; 
	/*flex: 0 1 120px;*/
	/*order: 1;
	align-self: flex-end;*/}
/*.box-2 { background: slategray;
	/*flex: 0 2 120px;*/ }*/
/*.box-3 { background: pink;
	margin-left: auto;
	/*flex: 0 3 120px;*/ }*/