calc css muito loko

by Rafael Nepomuceno

HTML

<!-- @author: https://twitter.com/antraxis -->

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

CSS

body {
  background: #fff;
}

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 60%;
  height: 300px;
  margin: auto;
  background: #E6E2DC;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
  background: #46B980;
  padding: 10px;
  color: #fff;
}