Jump to Categories

Flexbox

Distribute space

<div class="flex">
  <div class="col a"></div>
  <div class="col a"></div>
  <div class="col b"></div>
</div>

.flex {
  display: flex;
}

.flex .col {
  background: purple;
  flex: 1 1 0;
  height: 50px;
  margin: 5px;
}

.flex .col:first-child {
  margin-left: 0;
}

.flex .col:last-child {
  margin-right: 0;
}

Equal height cols

See the Pen mMvwey by Shane Prendergast (@webknit) on CodePen.