How to add space between elements so they fill their container div?

Question

I want to add space between spans so that the leftmost and rightmost spans will be close to the edges of the inner div. I\'ve tried to add the following ru

Answer 1

For Infos and older browser, text-align:justify + a pseudo element to generate an extra line can still be usefull. For really old browser (IE5) , turn the pseudo into a tag (span), technic is quiet old but still efficient where flex is not avalaible.

div {
  background:#C3DEB7;
  padding:1px;
}
p {
  background:#A0C5E8;
  margin:1em auto;
  width:80%;
  text-align:justify;
}
p:after {
  content:'';
  width:100%;
}
span, p:after {
  display:inline-block;
}
span {
  border-radius: 15px;
  background:#7A9FC1;
  line-height:60px;
  width:60px;
  margin-top:1em;
  text-align:center;
  color:white;
  box-shadow:inset 0 0 0 1px ;
}
span:nth-child(1) {
  background:#709AC2;
}
span:nth-child(3) {
  background:#6D93B7;
}
span:last-child {
  background:#948798;
}

<div>
  <p>
    <span> span</span>
    <span> span</span>
    <span> span</span>
    <span> span</span>
  </p>
</div>

http://codepen.io/anon/pen/NNbXEm

Answer 2

You can do this with Flexbox and justify-content: space-between.

.content {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
  background: #A0C5E8;
  padding: 10px 0;
}

span {
  width: 50px;
  height: 50px;
  background: black;
}

<div class="content">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>