flex（伸缩盒）仿外卖选项

1.趁着空挡学习web，做做小案例，由于没有素材随便找了张图片，先上图

2，代码较为简单，就不细说，直接上码

2.1 布局代码

<div class="box">
<div class="div ms">找美食</div>
<div class="div jd">订酒店</div>
<div class="div tg">团购</div>
<div class="div ph">排行榜</div>
</div>
<div class="box">
<div class="div ms">找美食</div>
<div class="div jd">订酒店</div>
<div class="div tg">团购</div>
<div class="div ph">排行榜</div>
</div>

2.2 样式代码

.box {display: flex;}

.div{
flex-grow: 1;
height: 30px;
text-align:center;
padding-top: 80px;
}
.ms{
background: url(img/test.png) no-repeat center 10px;
}
.jd{
background: url(img/test.png) no-repeat center 10px;
}
.tg{
background: url(img/test.png) no-repeat center 10px;
}
.ph{
background: url(img/test.png) no-repeat center 10px;
}