效果圖：

效果圖的要求：
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軸的設定）意思就是設定了這個，上邊設定的就沒用了。