div 内的 span 两端对齐

我们经常会有一中需求，一行中左边是一个文案，比如"待处理店铺"，右边是数量比如是“3”，如下图所示

我们第一个想法就是用弹性盒实现，但是其实有一个很简单的方式用父div,给一个text-align:justify;子元素用span，就可以了不过还是几个需要的点，下面给一个demo：

html

<div class="box"> 
  <span>1</span> 
  <span>2</span> 
  <span>3</span> 
  <span>4</span> 
  <span>5</span> 
</div> 

css

* { 
  margin: 0; 
  padding: 0; 
} 
html,body { 
  width: 100%; 
  height: 100%; 
} 
.box { 
  width: 100%; 
  height: 100%; 
  /* 设置元素两端对齐 */ 
  text-align: justify; 
} 
/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */ 
.box:after { 
  content: ""; 
  display: inline-block; 
  overflow: hidden; 
  width: 100%; 
} 
.box span { 
  width: 50px; 
  height: 50px; 
  /* 设置盒子为行内块 */ 
  display: inline-block; 
  background-color: skyblue; 
  /* 设置盒子内元素水平居中 */ 
  text-align: center; 
  /* 设置盒子内容垂直居中 */ 
  line-height: 50px; 
}