HTML
<ul class="flex-container">
<li class="flex-item flex1">1</li>
<li class="flex-item flex2">2</li>
</ul>
<ul class="flex-container">
<li class="flex-item flex1_v2">1</li>
<li class="flex-item flex2_v2">2</li>
</ul>
<ul class="flex-container">
<li class="flex-item flex3">1</li>
<li class="flex-item flex3">2</li>
<li class="flex-item flex3">3</li>
</ul>
<ul class="flex-container">
<li class="flex-item flex4">1</li>
<li class="flex-item flex4">2</li>
<li class="flex-item flex4">3</li>
<li class="flex-item flex4">4</li>
</ul>
<ul class="flex-container reverse-row">
<li class="flex-item flex1">1</li>
<li class="flex-item flex1">2</li>
</ul>
<ul class="flex-container">
<li class="flex-item flex3">1</li>
<li class="flex-item flex3">2</li>
<li class="flex-item flex3">3</li>
</ul>
<ul class="flex-container">
<li class="flex-item flex4">1</li>
<li class="flex-item flex4">2</li>
<li class="flex-item flex4">3</li>
<li class="flex-item flex4">4</li>
</ul>
<ul class="flex-container reverse-row">
<li class="flex-item flex25">1</li>
<li class="flex-item flex75">2</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display:block;
position:relative;
max-width:1100px;
width: calc(100% - 20px);
margin: 0 auto;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
}
.flex-container.reverse-row{
flex-direction: row-reverse;
}
.flex-item {
background: #336699;
padding: 10px;
margin:0 10px 20px 10px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: all 0.05s;
display:flex;
align-items:center;
justify-content: center;
flex: 3 1 200px;
min-height:200px;
}
/* Grow, Shrink, Basis*/
.flex1 { flex: 6 1 200px; }
.flex2 { flex: 1 1 200px; }
.flex3 { flex: 1 1 200px; background-color:#ff0000;}
.flex4 { flex: 1 1 150px; background-color:green;}
.flex25 { flex: 1 1 200px; background-color:green;}
.flex75 { flex: 1 1 200px; background-color:green;}
.flex1_v2 { flex: 2 1 1;}
.flex2_v2 { flex: 1 1 150px;}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color:#ccc;
box-shadow:inset 0px 0px 5px black;
}
::-webkit-scrollbar-thumb {
background-color: #666;
border-radius:4px;
cursor:pointer;
}
::-webkit-scrollbar-thumb:hover{
background-color:#000;
}
