盒子使用display:flex之后，子元素使用display:none后display:block失效问题

html:

<div class="nodata" v-show="boardcenterContet.length==0">
         <div>
             <i class="el-icon-warning"></i>
             <span>暂无报表展示，请进入C/S端"系统看板设置"页面进行设置</span>
         </div>
   </div>

css:

.nodata{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.nodata i,
.nodata span{
    display: block;
}

i,span使用display:block失效问题：
此时在外层包一个div即可