*{
	box-sizing:border-box;
}
body{
	padding-bottom:10em;
}
pre{
	background-color:#eee;
	border:1px solid #ccc;
	font-size:1.1em;
	padding:1em .5em;
	color:#444;
	color:teal;
}
img{
	max-width:100%;
}
[class^='container']{
	display:flex;
	border:1px solid black;
}
.container-demo{
	flex-direction:row-reverse;
}
.item-demo{
	background-color:pink;
	width:60px;
	height:60px;
}
.item-demo:nth-child(even){
	background-color:lightblue;
}
.container-demo2{
	justify-content:space-between;
}
.container-demo3{
	height:300px;
	justify-content:center;
	align-items:center;
}
.container-demo3 .item-demo{
	/*height:auto;*/
}
.container-demo4{
	height:400px;
	justify-content:center;
	align-items:center;
}
.container-demo4 .item-demo{
	display:flex;
	justify-content:center;
	align-items:center;
	margin:.5em;
}
.container{
	border:1px solid black;
	display:flex;
}
[class^='item']{
	background-color:pink;
	display:flex;
	justify-content:center;
	align-items:center;
}
[class^='item']:nth-child(even){
	background-color:lightblue;
}
.item{
	width:80px;
	height:80px;
}
.container1{
	width:450px;
	/*flex-direction:column;*/
}
.item1{
	flex-basis:auto;
	width:60px;
	height:60px;
	margin-right:10px;
}
.item1:first-child{
	flex-grow:2;
}
.item1:nth-child(3){
	flex-grow:3;
}
.item2{
	height:60px;
}
.item2:first-child{
	width:200px;
}
.item2:last-child{
	flex-grow:1;
}
.container3{
	flex-wrap:wrap;
}
.item3{
	flex:1 0 120px;
	height:60px;
}
.container4{
	height:200px;
}
.item4{
	height:60px;
	width:60px;
}
.item4:nth-child(2){
	order:-1;
}
.item4:last-child{
	align-self:center;
}