How to equally distribute elements horizontally using CSS

Question

I have eleven dots arrange horizontally using CSS. How can I evenly/equally distribute spacing between elements (mine are elements) based on the wi

Answer 1

Using flexbox, you can do something like this:

.parent {
    display: flex;
    justify-content: space-between;
}

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ffffd;   
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

JSFiddle Demo