CSS 全兼容的多列均匀布局问题

<style>
.justify {
  text-align: justify;
}
.justify::after {
  position: relative;
  display: inline-block;
  content: '';
  width: 100%;
}
.justify i {
  width: 24px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-color: black;
}
</style>

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>