效果图：
效果图的要求：
1、每行根据屏幕宽度或者li宽度定几个摆为一行（需要自动换行，少了在一行，多了自动换行）
2、圆圈下方文字需要自动换行
代码：
<div class='center'>
<span>企业统计</span>
<ul class='number'>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻织行业企业入驻纺织行业企业入驻纺织行业企业入驻织行业企业入驻纺织行业企业入驻纺织行业企业入驻织行业企业入驻纺织行业企业入驻纺织行业企业入驻织行业企业入驻纺织行业企业入驻纺织行业企业入驻织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
<li>
<div><span><span>50</span>家</span></div>
<p>纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻纺织行业企业入驻</p>
</li>
</ul>
</div>
.center{
margin-top:140px;
}
.center>span{
color:rgb(51,51,51);
font-size: 18px;
font-weight:550;
}
.number{
width:1200px; //需固定宽度
margin-left:69px;
margin-top:20px;
display:flex; //弹性容器
align-items: flex-start; //每行li始终顶部对齐
flex-wrap: wrap; //自动换行
}
.number>li>div{
width:150px;
height:150px;
border:6px solid rgb(245,155,59);
border-radius:50%;
margin-right:25px;
text-align: center;
line-height: 150px;
}
.number>li>div>span>span{
color:rgb(245,155,59);
font-size:40px;
font-weight:600;
}
.number>li>p{
width:130px; //需固定宽度
color:rgb(245,155,59);
padding-left:25px;
display:flex; //弹性容器
flex-wrap: wrap; //自动换行
margin-top: 14px;
}
弹性容器（外层，例如 ul）
display:flex;
主轴方向（x轴）弹性项目怎么摆的justify-content:flex-start/flex-end/center/space-between/
space-around;
交叉轴(y轴)弹性项目怎么摆的：
1、只有一条y轴：align-items:flex-start/flex-end/centerbaseline/stretch;
2、多条y轴：align-content:flex-start/flex-end/center/space-between/space-around/stretch
弹性项目（l里层，例如 li）
flex:1;就完事了。
还有一条align-self：flex-start/flex-end/center/stretch/baseline(此方法针对的是对某个弹性项目
单独设置y轴对齐方式。并且此设置会覆盖弹性容器align-items中对于y轴的设置）意思就是设置了这个，上边设置的就没用了。