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;*/ }*/