使用flex弹性盒子布局,在标签元素的布局可以起到很好的作用。
案例如下。
需求:一行显示3个带图标的选项,选项平分。
代码如下。
html:
<div class="titleItem">
<a href="#" class="item">
<img src="../images/indexIcon/huiyuanfuli.png" alt="">
<span>四个字的</span>
</a>
<a href="#" class="item">
<img src="../images/indexIcon/huiyuanzhuanxiang.png" alt="">
<span>四个字的</span>
</a>
<a href="#" class="item">
<img src="../images/indexIcon/jianyifankui.png" alt="">
<span>四个字的</span>
</a>
<a href="#" class="item">
<img src="../images/indexIcon/longtengfenghui.png" alt="">
<span>四个字的</span>
</a>
<a href="#" class="item">
<img src="../images/indexIcon/ruhuibiaozhun.png" alt="">
<span>四个字的</span>
</a>
<a href="#" class="item">
<img src="../images/indexIcon/wangqihuiyuan.png" alt="">
<span>四个字的</span>
</a>
</div>
css:
.titleItem{
display: flex;
flex-wrap: wrap;
font-size: .26rem;
}
.titleItem a{
width: 33.3%;
height: 1.5rem;
}
.titleItem img{
width: .78rem;
}
.titleItem span{
display: block;
}
结果展示:
解析:
首先给父标签设置flex布局,然后给flex-wrap属性,这样一来一行排不下会换行;
然后给每一个标签组设置宽度33.3%,这样可以平分屏幕宽度,宽度也是决定一行显示几个的原因;
文字和img记得设置适合的宽高,span记得给block属性,起换行作用;
标签元素的尺寸根据设计给的设计稿决定。