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屬性，起換行作用；

標籤元素的尺寸根據設計給的設計稿決定。