Flexbox

flexbox
<div class=“flexbox”>
    <div class=“flexbox-inner”>
      <div class=“stretch-all”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
    <div class=“flexbox-inner”>
      <div class=“stretch-all middle”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
    <div class=“flexbox-inner”>
      <div class=“stretch-all grid”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
    <div class=“flexbox-inner”>
      <div class=“stretch-all grid three”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
    <div class=“flexbox-inner horizontal”>
      <div class=“stretch-all”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
    <div class=“flexbox-inner vertical”>
      <div class=“stretch-all”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
    <div class=“flexbox-inner”>
      <div class=“stretch-all masonry”>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
        <div class=“item”></div>
      </div>
    </div>
  </div>
 *{margin:0; padding:0; box-sizing: border-box;}
  .flexbox {display:flex; max-width:700px; margin: 0 auto; flex-wrap: wrap;}
  .flexbox-inner {flex:0 0 19%; display:flex; margin: 1%; flex-direction:column; min-height:100px; align-items:center; 
  justify-content: space-evenly; background:#f8f8f9; box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1); 
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);}
  .flexbox-inner:hover {transform: scale(1.07);}
  .stretch-all {display:flex; align-items:stretch; max-width:60px; width:100%; margin:0 auto; }
  .item {flex:1; height: 40px; background:#399ec3; border-radius: 2px; }
  .item + .item{margin-left:2%;}
  .stretch-all.middle > .item:nth-child(2) {flex:3;}
  .stretch-all.grid {flex-wrap:wrap; justify-content:space-between;}
  .stretch-all.grid > .item {height:15px; width:49%; flex:none; margin-bottom:2%;}
  .stretch-all.grid > .item + .item {margin-left: 0;}
  .stretch-all.grid > .item:nth-child(3n) {width:100%;}
  .stretch-all.grid.three > .item {flex:0 32%; height:15px;}
  .flexbox-inner.horizontal > div {align-items:flex-end;}
  .flexbox-inner.horizontal > div .item:nth-child(1) {height:40%;}
  .flexbox-inner.horizontal > div .item:nth-child(2) {height:50%;}
  .flexbox-inner.horizontal > div .item:nth-child(3) {height:60%;}
  .flexbox-inner.horizontal > div .item:nth-child(4) {height:20%;}
  .flexbox-inner.horizontal > div .item:nth-child(5) {height:30%;}
  .flexbox-inner.horizontal {align-items:initial; flex-direction:row; padding-bottom:28px;}
  .flexbox-inner.vertical   {align-items:flex-end; flex-direction:row; padding-bottom:28px;}
  .flexbox-inner.vertical > div {flex-direction:column; justify-content:space-between; height:40px;}
  .flexbox-inner.vertical > div .item {margin:1% 0;flex:0 32%;}
  .flexbox-inner.vertical > div .item:nth-child(1) {width:40%;}
  .flexbox-inner.vertical > div .item:nth-child(2) {width:50%;}
  .flexbox-inner.vertical > div .item:nth-child(3) {width:60%;}
  .flexbox-inner.vertical > div .item:nth-child(4) {width:20%;}
  .flexbox-inner.vertical > div .item:nth-child(5) {width:30%;}
  .stretch-all.masonry {display:flex; flex-flow:column wrap; align-content: space-between; height:90px; padding-top:15px;}
  .stretch-all.masonry:before, .stretch-all.masonry:after {content:”; flex-basis: 100%; width: 0; order:2}
  .stretch-all.masonry .item {width: 32%; margin-bottom:2%; flex:none}
  .stretch-all.masonry .item:nth-child(3n+1) { order: 1; }
  .stretch-all.masonry .item:nth-child(3n+2) { order: 2; }
  .stretch-all.masonry .item:nth-child(3n)   { order: 3; }
  .stretch-all.masonry .item:nth-child(1) {height:10px;}
  .stretch-all.masonry .item:nth-child(2) {height:22px;}
  .stretch-all.masonry .item:nth-child(3) {height:14px;}
  .stretch-all.masonry .item:nth-child(4) {height:15px;}
  .stretch-all.masonry .item:nth-child(5) {height:17px;}
  .stretch-all.masonry .item:nth-child(6) {height:12px;}
  .stretch-all.masonry .item:nth-child(7) {height:12px;}
  .stretch-all.masonry .item:nth-child(8) {height:12px;}
  .stretch-all.masonry .item:nth-child(9) {height:10px;}
  .stretch-all.masonry .item + .item {margin-left:0;}