使用flex-direction的坑

<div class="software-func-container">

    <div class="software-func-row">
      <div class="software-func-blo">
        <div>实时监控</div>
        <div>
          系统对油漆耗量的实时监控，便于客户对油漆耗量的及时管控
        </div>
      </div>
      <div class="software-func-blo">
        <div>精准分析</div>
        <div>
          精准采集喷涂耗量数据，为后续更好的喷涂控制提供数据支撑
        </div>
      </div>
      <div class="software-func-blo">
        <div>报警提醒</div>
        <div>
          对报警信息通过短信、移动端进行推送，保障人员第一时间收到报警信息
        </div>
      </div>
    </div>

    <div class="software-func-row">
      <div class="software-func-blo">
        <div>精益求精</div>
        <div>
          通过数据分析，检验改善状况，实现加快喷涂管控PDCA过程，加快发现问题解决问题的能力
        </div>
      </div>
      <div class="software-func-blo">
        <div>耗量控制</div>
        <div>
          通过系统控制每道漆单面积喷涂耗量，对单道漆的耗量进行控制，降低整体的油漆耗量
        </div>
      </div>
      <div class="software-func-blo">
        <div>大数据工艺匹配</div>
        <div>
          获取各个设备生产过程监控数据及配置最优参数，实现转场参数的快速设定，降低转场时油漆耗量参数的摸索过程
        </div>
      </div>
    </div>

  </div>

.software-func-container {
  width: 1200px;
  margin: 0 auto;
}

.software-func-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.software-func-blo {
  width: 365px;
  height: 195px;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.software-func-blo div:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
}

.software-func-blo div:nth-child(2) {
  margin-top: 10px;
  color: #bbbbbb;
}

第一种解决方法：固定子div高度

.software-func-blo div:nth-child(2) {
  margin-top: 10px;
  color: #bbbbbb;
  height: 60px; //关键点，固定高度
}

效果如下：

第二种解决方法：不使用flex布局，直接使用text-align: center

给每一行都text-align：center，然后通过margin来调整元素之间的间距