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

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 or unwanted.

edit : there is nothing here about text-justify if you ever read too fast ;)

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


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>

Tags:

Css

Recent Posts