css使用flex布局实现自适应

<div id="box">
<div class="col">
			<div class="left">
    <div class="item">
        <div class="num">56</div>
        <div class="text">上传知识</div>
    </div>
</div>
			<div class="center">
<div class="item">
        <div class="num">56</div>
        <div class="text">上传知识</div>
    </div>

</div>
			<div class="right">
<div class="item">
        <div class="num">56</div>
        <div class="text">上传知识</div>
    </div>

</div>
		</div>
    <div class="col">
			<div class="left">
    <div class="item">
        <div class="num">56</div>
        <div class="text">上传知识</div>
    </div>
</div>
			<div class="center">
<div class="item">
        <div class="num">56</div>
        <div class="text">上传知识</div>
    </div>

</div>
			<div class="right">
<div class="item">
        <div class="num">56</div>
        <div class="text">上传知识</div>
    </div>

</div>
		</div>
</div>

<style>
/* ===============================构建思路:利用flex子元素布局的flex-grow,对空白空间的占用,非常容易实现自适应布局。=============================== */
*{margin: 0; padding: 0;}
#box .col{display: flex;}
#box .col .num{
    font-size: 2.8rem;
    color: #2a304a;
    letter-spacing: 0;
    line-height: 3rem;
    font-weight: 700;
    padding-bottom: .8rem
}

#box .col .text{
    font-size: 1.4rem;
    color: #666;
    letter-spacing: 0;
    line-height: 1.8rem;
    font-weight: 400
}

#box .col .left{width: 30%; height: 96px;}
#box .col .center{/* flex: 1; */margin:0 auto;/* text-align:center; */}
#box .col .right{width: 30%;margin-right:1%;text-align: right;}
#box .col .right .item .num{
    margin-right:2.2rem;
}


</style>