Don't use % for that layout...

Think for a second how you would structure the design above. Among the first things you’ll notice is that we need to allocate the horizontal real estate evenly between a number of elements, so given that you are reading this, chances are you are all about responsive layouts, and you would probably roll up your sleeves and decide to use the all mighty display: inline-block while throwing in some widths using percentage digits, and call it a day.

Stop. Don’t do it. Take a deep breath and think about that colleague (the one you like) or even your future self, you want to be kind to them right? Then don’t make things complicated when they don’t need to be.

The worst CSS you can add, is the one you didn’t even need to write. This includes any styles you don’t explicitly have to set, like widths in this case.

Products change, new features will be added (or dropped), new trends will change the icons, products will be translated to verbose languages, and please don’t forget about A/B testing. This is why the fewer constraints we have in the layout, the easier will be to embrace changes.

For simplicity sake, our case of study will be composed by just few span elements, but the principles will stand for more complex hierarchies.

Our solution has to satisfy the following requirements:

We will take 4 approaches, sorted descending on browser support:

The <table> element

Even though some people will laugh at you for using a <table> element, if absolute cross-browser compatibility is a requirement, this is the way to go.

1 2 3
1 222 3
1 2 3 4
1 2 3 4
CSS
table {
  text-align: center;
  width: 100%;
}
HTML
<table>
  <tbody>
    <tr>
      <td>
        <span>1</span>
      </td>
      <td>
        <span>2</span>
      </td>
      <td>
        <span>3</span>
      </td>
      <td>
        <span>4</span>
      </td>
    </tr>
  </tbody>
</table>
Browser Support
Internet Explorer All
Chrome All
Firefox All
Safari All

Display: table

With this approach, we get the benefits of a <table> without the performance hit.

1 2 3
1 222 3
1 2 3 4
1 2 3 4
CSS
div {
  display: table;
  width: 100%;
}
span {
  display: table-cell;
}
HTML
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>
Browser Support
Internet Explorer 8+
Chrome All
Firefox All
Safari All

Text-align: justify

The devil is on the details, compare the alignment with the previous examples, you will note as the name implies that with this approach we can ‘justify’ the content so it starts and ends at the edges of the container element, as well as how it wraps to the next line when the width is overflown by the content.

The way this is achieved is by inserting a pseudo element after the container element forcing the container to reach a full width hence spacing the elements edge to edge.

1 2 3
1 222 3
1 2 3 4
1 2 3 4
CSS
span {
  display: inline-block
}
div {
  text-align: justify;
  width: 100%;
}
div::after {
  content: '';
  display: inline-block;
  width: 100%;
}
/* -- Internet Explorer support -- */
div:after {
  content: '';
  display: inline-block;
  width: 100%;
}
HTML
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>
Browser Support
Internet Explorer *8+
Chrome All
Firefox All
Safari All

Display: flex

The easiest way to work with complex layouts is definitely the flex-box, the draw back is the browser support. Depending on the actual objective we use two alternatives to justify: space-around or space-between.

space-around

1 2 3
1 222 3
1 2 3 4
1 2 3 4

space-between

1 2 3
1 222 3
1 2 3 4
1 2 3 4
CSS
/* Space Around */
div {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
/* Space Between */
div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
HTML
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>
Browser Support
Internet Explorer 10+
Chrome All
Firefox All
Safari All

Conclusion

For the initial example, in my opinion display: table is the way to go, here is why:

CSS
ul {
    border: 1px dashed #AAA;
    border-radius: 5px;
    display: table;
    margin: auto;
    padding: 14px 0;
    width: 85%;
}
li {
    display: table-cell;
    text-align: center;
}
img {
    display: block;
    margin: auto;
}
span{
    display: inline-block;
    padding: 0 4px;
}
HTML
<ul>
    <li>
        <span>Mon</span>
        <img src="/assets/svgs/storms.svg"
            width="60" height="60"
            alt="storms"/>
        <span>71°</span>
        <span>47°</span>
    </li>
    <li>
        <span>Tue</span>
        <img src="/assets/svgs/rain.svg"
            width="60" height="60"
            alt="rain"/>
        <span>70°</span>
        <span>48°</span>
    </li>
    <li>
        <span>Wed</span>
        <img src="/assets/svgs/clear.svg"
            width="60" height="60"
            alt="clear"/>
        <span>80°</span>
        <span>49°</span>
    </li>
</ul>