.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.nowrap {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap li {
background: gold;
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.wrap-reverse li {
background: deepskyblue;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}