.r {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-direction: row;
}
.r .c1 {
  flex-basis: calc((100% + 10px) / (12 / 1) - 10px);
}
.r .c2 {
  flex-basis: calc((100% + 10px) / (12 / 2) - 10px);
}
.r .c3 {
  flex-basis: calc((100% + 10px) / (12 / 3) - 10px);
}
.r .c4 {
  flex-basis: calc((100% + 10px) / (12 / 4) - 10px);
}
.r .c5 {
  flex-basis: calc((100% + 10px) / (12 / 5) - 10px);
}
.r .c6 {
  flex-basis: calc((100% + 10px) / (12 / 6) - 10px);
}
.r .c7 {
  flex-basis: calc((100% + 10px) / (12 / 7) - 10px);
}
.r .c8 {
  flex-basis: calc((100% + 10px) / (12 / 8) - 10px);
}
.r .c9 {
  flex-basis: calc((100% + 10px) / (12 / 9) - 10px);
}
.r .c10 {
  flex-basis: calc((100% + 10px) / (12 / 10) - 10px);
}
.r .c11 {
  flex-basis: calc((100% + 10px) / (12 / 11) - 10px);
}
.r .c12 {
  flex-basis: calc((100% + 10px) / (12 / 12) - 10px);
}