前端开发技术点总结（六）：flex布局案例

使用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属性，起换行作用；

标签元素的尺寸根据设计给的设计稿决定。