flex（伸缩盒）仿外卖选项

原创于 2017-02-07 13:36:02 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

Html 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Flex布局的实战案例，通过简单的代码实现了一个包含四个相同区块的布局，并为每个区块添加了背景图片。

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

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

2.1 布局代码

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;
}