栅格图标排列布局

实现这种效果，主要用display：flex；实现。

<div style="margin-top: 5%;display: flex; flex-direction:row">
   <div style="display: flex; flex-direction: column;  25%; text-align: center;">
      <div style="background: url(../../img/monitoring.png) no-repeat; background-size: contain; background-position: center; height: 40px;"></div>
      <span style="font-size: 10px; margin-top: 7px;">作业监控</span>
   </div>
   <div style="display: flex; flex-direction: column;  25%; text-align: center;">
      <div style="background: url(../../img/set.png) no-repeat; background-size: contain; background-position: center; height: 40px;"></div>
      <span style="font-size: 10px; margin-top: 7px;">机具配置</span>
   </div>
</div>