Flexbox Portfolio

by marusti

HTML

<div class="flexcontainer">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flexcontainer>div {
  width: 100%;
  border: 1px solid;
  text-align: center;
  padding: 1em;
  margin-bottom: 1em
}

@media only screen and (min-width: 768px) {
  .flexcontainer>div {
    flex: 0 0 50%;
  }
}

@media only screen and (min-width: 992px) {
  .flexcontainer>div {
    flex: 0 0 33.33%;
  }
}

@media only screen and (min-width: 1200px) {
  .flexcontainer>div {
    flex: 0 0 25%;
  }
}